<!-- 搜‘根据需要更改’，需要根据实际项目更改的已经列出来了 -->
<!-- 重要事项：
	1.由于阅读页截取整行的需要，请确保文本格式和本插件中的text变量所示一致，即：！！！每一行的高度要一致！！！
	  如果要加内容，例如每一章开头加上章节名:'<h1>章节名</h1>',请确保所加的内容是单行高度的整数倍！！
	2.‘仅用于计算’的样式必须和阅读页样式一致，不然显示会有问题,
	3.字体必须是偶数，否则1.5倍行距的时候会无法截取到整行
 -->

<template>
	<view style="height: 100%;">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<!-- 仅用于计算（结构和样式请和阅读页一致） -->
		<view class="container hidden">
			<view class="chapter">
				{{$t('read.zjm')}}
			</view>
			<view id="content" class="content">
				<view class="inner-box" :style="{height: `${innerHeight}px`}">
					<view class="book-inner" id="preChapter" v-html="preChapter.text"
						:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight*fontSize}px`}">
					</view>
				</view>
			</view>
			<view class="bottom-bar">
				{{$t('read.xsdl')}}
			</view>
		</view>
		<view class="container hidden">
			<view class="chapter">
				{{$t('read.zjm')}}
			</view>
			<view class="content">
				<view class="inner-box" :style="{height: `${innerHeight}px`}">
					<view class="book-inner" id="curChapter" v-html="curChapter.text"
						:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight*fontSize}px`}">
					</view>
				</view>
			</view>
			<view class="bottom-bar">
				{{$t('read.xsdl')}}
			</view>
		</view>
		
		<view class="container hidden">
			<view class="chapter">
				{{$t('read.zjm')}}
			</view>
			<view class="content">
				<view class="inner-box" :style="{height: `${innerHeight}px`}">
					<view class="book-inner" id="nextChapter" v-html="nextChapter.text"
						:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight*fontSize}px`}">
					</view>
				</view>
			</view>
			<view class="bottom-bar">
				{{$t('read.xsdl')}}
			</view>
		</view>

		<!-- ************************** -->
		<!--     根据需要更改（封面）     -->
		<!-- ************************** -->
		<!-- 封面 -->
		<!--   <view class="cover container" :class="{container0: background === 1, container1: background === 2, container2: background === 3, container3: background === 4, container4: background === 5, container5: background === 6}" :style="{zIndex: 104, transform: `translate${cover.pageTranslate[turnType]}`, transition: `transform ${showAnimation?turnPageTime:0}s`,
			boxShadow:showShadow&&turnType===0?'0 0 10px 0 rgba(0,0,0,.4)':''}" @touchstart="coverTouchStart"
      @touchend="coverTouchEnd" @touchmove="coverTouchMove" @touchcancel="coverTouchcancel">
      <image :src="BookData.img"></image> 
      <view>
        {{BookInfo.name?BookInfo.name:''}} 
      </view>
    </view> -->
		<!-- ************************** -->
		<!--****************************-->
		<!-- ************************** -->


		<!-- 阅读页（结构和样式请和仅用于计算元素一致） -->
		<!-- 上一页 -->
		<view class="container"
			:class="{container0: background === 1, container1: background === 2, container2: background === 3, container3: background === 4, container4: background === 5, container5: background === 6}"
			:style="{zIndex: 102, transform: `translate${prePage.pageTranslate[turnType]}`, transition: `transform ${showAnimation?turnPageTime:0}s`,
			boxShadow:showShadow&&turnType===0?'0 0 10px 0 rgba(0,0,0,.4)':''}" @touchstart="touchStart" @touchend="touchEnd"
			@touchmove="touchMove" @touchcancel="touchcancel">
			<!-- 章节名 -->
			<!-- <view class="chapter">
				{{prePage.chapterName}}
			</view> -->
			<!-- <text style="color: rgba(0, 0, 0, 0.55),font-size: 12px;">
				{{curPage.chapterName}}
			</text>	 -->
			<!-- 外层class="content"用于计算阅读部分的高度 -->
			
			<view class="content" style="margin-top: 10px;">
				<!-- 内层class="inner-box"利用innerHeight将内容截取至整行，防止文字不完整的情况出现 -->
				<view class="inner-box" :style="{height: `${innerHeight}px`}" v-if="prePage.canRead">
					<!--  <view style="display:flex;flex-flow: column;justify-content: center;align-items: center;height: 100%;"
            v-show="!prePage.text">
            {{wifi?wifi:$t('read.rnjzz')}}
            
          </view> -->
		  <text class="selector">
		  	{{curPage.chapterName}}
		  </text>
					<!-- 最里层class="book-inner"的用于获取文本总高度，计算总页数，注意不可以overflow:hidden -->
					<view class="book-inner" v-html="prePage.text" :style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight*fontSize}px`,color: `${colorList[background - 1]}`,
						transform: `translateY(-${prePage.pageNum*innerHeight}px)`}">

					</view>
				</view>
				<view style="display:flex;flex-flow: column;justify-content: center;align-items: center;height: 100%;"
					v-else>
					{{$t('read.myzxnr')}}
					<!-- <view style="padding: 5px 15px;background-color: #eee;">去购买</view> -->
				</view>

			</view>
			<view class="bottom-bar">
				<!-- 时间 -->
				<!-- <view>
					{{systemTimeStr}}
				</view> -->
				<!-- 页码 -->
				<view v-if="turnType!=2&&curChapter.canRead">
					{{prePage.pageNum + 1}}/{{prePage.totalPage}}
				</view>
				
			</view>

		</view>

		<!-- 本页 -->
		<view class="container"
			:class="{container0: background === 1, container1: background === 2, container2: background === 3,container3: background === 4, container4: background === 5, container5: background === 6}"
			:style="{zIndex: 101, transform: `translate${curPage.pageTranslate[turnType]}`, transition: `transform ${showAnimation?turnPageTime:0}s`,
			boxShadow:showShadow&&turnType===0?'0 0 10px 0 rgba(0,0,0,.4)':''}" @touchstart="touchStart" @touchend="touchEnd"
			@touchmove="touchMove" @touchcancel="touchcancel">
			<!-- 章节名 -->
			<!-- <view class="chapter">
				{{curPage.chapterName}}
			</view> -->
			
				
			<view  class="content" style="margin-top: 10px;">
				<view style="display:flex;flex-flow: column;justify-content: center;align-items: center;height: 100%;"
					v-if="!curPage.text" >
					<!-- {{wifi?wifi:$t('read.rnjzz')}} -->
				</view>
				<text class="selector" v-if="turnType==2">
					{{curChapter.chapterName}}
				</text>	
			    <text class="selector" v-else>
			    	{{curPage.chapterName}}
			    </text>	 	
				<scroll-view 
				  @scroll="onScroll" 
				  @scrolltoupper="onScrollToTop" 
				  @scrolltolower="onScrollToLower" 
				  scroll-y="true" 
				  :scroll-top="scrollTop" 
				  upper-threshold="0.5" 
				  lower-threshold="50" 
				  class="inner-box" 
				  :style="{height: `${innerHeight}px`}" 
				  v-if="turnType==2">
				  <view class="book-inner" v-html="curChapter.text"
				    :style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight*fontSize}px`,color: `${colorList[background - 1]}`,transform:turnType!=2? `translateY(-${curPage.pageNum*innerHeight}px)`:'none'}">
				  </view>
				</scroll-view>
				
				<view  class="inner-box" :style="{height: `${innerHeight}px`}" v-else-if="curPage.canRead">
					<view  class="book-inner" v-html="curPage.text"
						:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight*fontSize}px`,color: `${colorList[background - 1]}`,transform:turnType!=2? `translateY(-${curPage.pageNum*innerHeight}px)`:'none'}">
					</view>
				
				</view>
				
				<view style="display:flex;flex-flow: column;justify-content: center;align-items: center;height: 100%;"
					v-else>
					{{$t('read.myzxnr')}}
					<!-- <view style="padding: 5px 15px;background-color: #eee;" @touchstart.stop @touchmove.stop
            @touchend.stop="buyBook">去购买</view> -->
				</view>

			</view>
			
			<!-- #ifdef MP || H5 -->
			<view v-if="(curPage.pageNum + 1) >curPage.totalPage  && config.task_wx_status_j!=0"
				style="display:grid;margin-bottom:600rpx">
				<view class="adContainer">

					<ad-custom :unit-id="config.wx_ad_ys_read" ad-intervals="30" style="height: 100%;width:650rpx;">
					</ad-custom>
				</view>
				<view style="padding: 5px 15px;background-color: #eee;font-size: 35rpx;text-align: center;"
					@click="wxad" @load="adLoad" @touchstart.stop @touchmove.stop @touchend.stop="wxad">
					{{config.task_wx_name}}</view>

			</view>
			<!-- #endif -->
			
			<view class="bottom-bar">
		<!-- <view class="loader" v-if="show"></view> -->
				<!-- 时间 -->
				<!-- <view>
					{{systemTimeStr}}
				</view> -->
				<!-- 页码 -->
				<view v-if="turnType!=2&&curChapter.canRead">
					<text v-if="(curPage.pageNum + 1) >curPage.totalPage">{{$t('read.ady')}}</text>
					<text v-else>{{curPage.pageNum + 1}}/{{curPage.totalPage}}</text>
				</view>
				
			</view>

		</view>

		<!-- 下一页 -->
		<view class="container"
			:class="{container0: background === 1, container1: background === 2, container2: background === 3, container3: background === 4, container4: background === 5, container5: background === 6}"
			:style="{zIndex: 100, transform: `translate${nextPage.pageTranslate[turnType]}`,transition: `transform ${showAnimation?turnPageTime:0}s`,
			boxShadow:showShadow&&turnType===0?'0 0 10px 0 rgba(0,0,0,.4)':''}">
			<!-- 章节名 -->
			<!-- <view class="chapter">
				{{nextPage.chapterName}}
			</view> -->
			<!-- <text style="color: rgba(0, 0, 0, 0.55),font-size: 12px;">
				{{curPage.chapterName}}
			</text> -->
			<view class="content" style="margin-top: 10px;">
				
				<view style="display:flex;flex-flow: column;justify-content: center;align-items: center;height: 100%;"
					v-if="!nextPage.text">
					<!-- {{wifi?wifi:$t('read.rnjzz')}} -->
				</view>
				<text class="selector">
					{{curPage.chapterName}}
				</text>	
				<view class="inner-box" :style="{height: `${innerHeight}px`}" v-if="nextPage.canRead">
					<view class="book-inner" v-html="nextPage.text" :style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight*fontSize}px`,color: `${colorList[background - 1]}`,
						transform: `translateY(-${nextPage.pageNum*innerHeight}px)`}">
					</view>
				</view>
				<view style="display:flex;flex-flow: column;justify-content: center;align-items: center;height: 100%;"
					v-else>
					{{$t('read.myzxnr')}}
					<!-- <view style="padding: 5px 15px;background-color: #eee;">去购买</view> -->
				</view>

			</view>
			<view class="bottom-bar">
				<!-- 时间 -->
				<!-- <view>
					{{systemTimeStr}}
				</view> -->
				<!-- 页码 -->
				<view v-if="turnType!=2&&curChapter.canRead">
					{{nextPage.pageNum + 1}}/{{nextPage.totalPage}}
				</view>
				
			</view>

		</view>

		<!-- 菜单层 -->
		<view class="menu" :style="{height: `100%`, width: `${windowWidth}px`}" v-if="menuShow" @touchend="closeMenu">
			<!-- 菜单层包含返回按钮的上半部分 -->
			<!-- :style="{height: `${statusBarHeight + 80}px`, top: itemShow ? 0 : `-100%`}" -->
			<view class="menu-top" :style="{top: itemShow ? 0 : `-100%`}"
				@touchend.stop
				:class="{mc0: background === 1, mc1: background === 2, mc2: background === 3, mc3: background ===4, mc4: background ===5, mc5: background === 6}">
				<view :style="{height: `${statusBarHeight}px`}"></view>
				<view class="head fonts">
					
					<view class="head-title" >
						<!-- <text>{{BookInfo.name||$t('read.jzz')}}</text> -->
					</view>
					<!-- #ifdef APP-PLUS -->
					<view class="head-right">
						<text class="iconfont left fonts" @click="onChange()">&#xe6dc;</text>
						<text class="iconfont left fonts" @click="Refresh()">&#xe8fb;</text>
						<text class="iconfont left fonts" @click="bookback()">&#xe60f;</text>
					</view>
					<!-- #endif -->
				</view>
				<!-- <view class="bookj"
					:class="{mc0: background === 1, mc1: background === 2, mc2: background === 3, mc3: background ===4, mc4: background ===5, mc5: background === 6}"
					v-if="addtBtn==false" @click="AddClick">{{$t('book.jrsj')}}</view> -->
				<!-- #ifdef MP || H5 -->
				<!-- <view class="bookfor"
					:class="{mc0: background === 1, mc1: background === 2, mc2: background === 3, mc3: background ===4, mc4: background ===5, mc5: background === 6}">
					<text class="iconfont left fontfpr" @click="onChange()">&#xe6dc; 换源</text>
					<text class="iconfont left fontfpr" @click="Refresh()">&#xe8fb; 刷新</text>
					<text class="iconfont left fontfpr" @click="bookback()">&#xe60f; 详情</text>
				</view> -->
				<!-- #endif -->
				<view class="head">
					<text class="iconfont back fonts" @click="return_back">&#xe8de;</text>
					<!-- <view class="show-link" v-if="progressTouched" >
						<view>
							{{directoryList[chapterProgress].name?directoryList[chapterProgress].name:$t('read.wlyc')}}
						</view>
						<view @click="clickurl(directoryList[chapterProgress].link?directoryList[chapterProgress].link:$t('read.zqsb'))">
							<text>{{$t('book.ly')}}：{{directoryList[chapterProgress].link?directoryList[chapterProgress].link:$t('read.zqsb')}}</text>
							<text style="float: right;background: #0000001a;padding: 0rpx 10rpx;border-radius: 10rpx;">访问原网页</text>
						</view>
					</view>
					<view class="show-link" v-else>
						<view>{{curChapter.chapterName?curChapter.chapterName:$t('read.wlyc')}}</view>
						<view  @click="clickurl(directoryList[chapterProgress].link?directoryList[chapterProgress].link:$t('read.zqsb'))">
						<text>{{$t('book.ly')}}：{{curChapter.link?curChapter.link:$t('read.zqsb')}}</text>
						
						<text style="float: right;background: #0000001a;padding: 0rpx 10rpx;border-radius: 10rpx;">访问原网页</text>
						</view>
						
					</view> -->
				
					<img src="../../static/icon/bookshelf.png" style="width: 15px;height: 15px" alt="" />
					<text style="font-size: 12px;rgba(0, 0, 0, 0.9);margin-left: 4px;"v-if="addtBtn==false" @click="AddClick"> 加入书架</text>	
					<text style="font-size: 12px;rgba(0, 0, 0, 0.9);margin-left: 4px;"v-else > 已加入书架</text>
					<img src="../../static/icon/share.png" style="width: 15px;height: 15px;margin-left: 15px;" alt="" />
					<text style="font-size: 12px;rgba(0, 0, 0, 0.9);margin-left: 4px;"@click="handleShare"> 分享</text>
				</view>
			</view>
			<!-- 菜单主体 -->
			<view class="menu-bottom" :style="{bottom: itemShow ? 0 : '-100%'}" @touchend.stop
				:class="{mc0: background === 1, mc1: background === 2, mc2: background === 3, mc3: background ===4, mc4: background ===5, mc5: background === 6}">
				<!-- 预留广告 -->

			<!-- 	<gr-ad :data="config" :type="config.ad_status" :height="150" ref="xad"
					v-if="config.c_ad && config.ad_status"></gr-ad> -->

<!-- 用于显示章节进度 -->

				<!-- 章节进度条 -->
				<view class="progress-box">
					<text @click="goPreChapter">{{$t('read.upz')}}</text>
					<view style="flex: 1;height: 100%;padding: 8px 0;">
						<slider :value="curChapter.chapterIndex" activeColor="#be8511" :block-size="20"
							:max="directoryList.length - 1" @changing="slideChanging" @change="slideChange" />
					</view>
					<text @click="goNextChapter">{{$t('read.downz')}}</text>
				</view>
				<view class="items-box">
					<view class="item-box" @click="openDirectory">
						<text class="iconfont" style="font-size: 25px;">&#xe604;</text>
						<!-- <text style="font-size: 13px;">{{$t('read.ml')}}</text> -->
					</view>
					<view class="item-box" v-if="background === 2" @click="changeBackground(3)">
						<text class="iconfont" style="font-size: 25px;">&#xe6ed;</text>
						<!-- <text style="font-size: 13px;">{{$t('read.yj')}}</text> -->
					</view>
					<view class="item-box" v-if="background === 1" @click="changeBackground(2)">
						<text class="iconfont" style="font-size: 25px;">&#xe60c;</text>
						<!-- <text style="font-size: 13px;">{{$t('read.rj')}}</text> -->
					</view>
					<view class="item-box" v-if="background > 2" @click="changeBackground(2)">
						<text class="iconfont" style="font-size: 25px;">&#xe60c;</text>
						<!-- <text style="font-size: 13px;">{{$t('read.rj')}}</text> -->
					</view>
					<view class="item-box" @click="openSetting">
						<!-- <text class="iconfont" style="font-size: 25px;">&#xe6c5;</text> -->
						<img src="../../static/icon/adjustment.png" style="width: 22px;height: 22px" alt="" />	
						<!-- <text style="font-size: 13px;">{{$t('read.sz')}}</text> -->
					</view>

				</view>
			</view>

			<view class="setting" :style="{bottom: settingShow ? 0 : `-100%`}" @touchend.stop
				:class="{mc0: background === 1, mc1: background === 2, mc2: background === 3, mc3: background ===4, mc4: background ===5, mc5: background === 6}">
				<view class="item" style="height: 40px;border-radius: 12px;display: flex;flex-direction: row;align-items: center;
				justify-content: space-between;background-color: rgba(0, 0, 0, 0.03);">
					<!-- <view class="item-name">{{$t('read.zh')}}</view> -->
					<view class="icon" @click="smallSize" v-if="fontSize>minFontSize">A-</view>
					<view class="icon" style="color: #666;border: #666 solid 1px;" v-else>A-</view>
					<view class="item-font">{{fontSize}}</view>
					<view class="icon" @click="bigSize" v-if="fontSize<maxFontSize">A+</view>
					<view class="icon" style="color: #666; border: #666 solid 1px;" v-else>A+</view>
					
				</view>
				
				<!-- <view class="item">
					<view class="item-name">{{$t('read.jft')}}</view>
					<view class="icon active" @click="changeFont(1)" v-if="simplified === 1">{{$t('read.jt')}}</view>
					<view class="icon" @click="changeFont(1)" v-else>{{$t('read.jt')}}</view>
					<view class="icon active" @click="changeFont(2)" v-if="simplified === 2">{{$t('read.ft')}}</view>
					<view class="icon" @click="changeFont(2)" v-else>{{$t('read.ft')}}</view>
				</view>
				<view class="item">
					<view class="item-name">{{$t('read.dsms')}}</view>
					<view class="icon active" @click="changeds(1)" v-if="danshou === 1">{{$t('read.gb')}}</view>
					<view class="icon" @click="changeds(1)" v-else>{{$t('read.gb')}}</view>
					<view class="icon active" @click="changeds(2)" v-if="danshou === 2">{{$t('read.qy')}}</view>
					<view class="icon" @click="changeds(2)" v-else>{{$t('read.qy')}}</view>
				</view>
				<view class="item">
					<view class="item-name">{{$t('read.hjj')}}</view>
					<view class="itemauto">
						<text class="icon" :class="{active: lineHeight === 0}" style="padding: 5px 8px;"
							@click="changeLineHeight(1)">{{$t('read.zx')}}
						</text>
						<text class="icon" :class="{active: lineHeight === 1.5}" style="padding: 5px 8px;"
							@click="changeLineHeight(1.5)">{{$t('read.jx')}}
						</text>
						<text class="icon" :class="{active: lineHeight === 2}" style="padding: 5px 8px;"
							@click="changeLineHeight(2)">{{$t('read.szs')}}
						</text>
						<text class="icon" :class="{active: lineHeight === 2.5}" style="padding: 5px 8px;"
							@click="changeLineHeight(2.5)">{{$t('read.jd')}}
						</text>
						<text class="icon" :class="{active: lineHeight === 3}" style="padding: 5px 8px;"
							@click="changeLineHeight(3)">{{$t('read.zd')}}  
						</text>
						<text class="icon" :class="{active: lineHeight === 4}" style="padding: 5px 8px;"
							@click="changeLineHeight(4)">{{$t('read.cd')}}
						</text>
					</view>
				</view>
				 -->
				<view class="item">
					<!-- <view class="item-name">{{$t('read.bj')}}</view> -->
					<view class="itemauto">
						<!-- <text class="bjicon" style="background: url(../../static/background1.jpg);"
							:class="{active: background === 1}" @click="changeBackground(1)"></text> -->
						<text class="bjicon" style="background-color: #ffffff;" :class="{active: background === 3}"
							@click="changeBackground(3)"></text>
						<text class="bjicon" style="background-color: #ead8ca;" :class="{active: background === 6}"
							@click="changeBackground(6)"></text>
						<text class="bjicon" style="background-color: #e3eecc;" :class="{active: background === 4}"
							@click="changeBackground(4)"></text>
						<text class="bjicon" style="background-color: #ffcccc;" :class="{active: background === 5}"
							@click="changeBackground(5)"></text>
						<text class="bjicon" style="background-color: #303B45;" :class="{active: background === 2}"
							@click="changeBackground(2)"></text>
					</view>
				</view>
				<view class="item">
					<!-- <view class="item-name">{{$t('read.fy')}}</view> -->
					<view class="itemauto" style="height: 40px;border-radius: 12px;background-color: rgba(0, 0, 0, 0.03);
					width: 100%;
					border-radius: 20rpx;">
						<text class="icon" :class="{active: turnType === 0}" style="padding: 5px 8px;"
							@click="changeTurnType(0)">覆盖翻页
						</text>
						<text class="icon" :class="{active: turnType === 1}" style="padding: 5px 8px;"
							@click="changeTurnType(1)">平移翻页
						</text>
						<text class="icon" :class="{active: turnType === 2}" style="padding: 5px 8px;"
							@click="changeTurnType(2)">上下翻页
						</text>
						<!-- <text class="icon" :class="{active: turnType === 3}" style="padding: 5px 8px;"
							@click="changeTurnType(3)">{{$t('read.wdh')}}
						</text> -->
					</view>
				</view>
				
			</view>

			<!-- 目录层 -->
			<view class="directory"
				:class="{mc0: background === 1, mc1: background === 2, mc2: background === 3, mc3: background === 4, mc4: background === 5, mc5: background === 6}"
				v-if="directoryShowBefore"
				:style="{left: directoryShow ? 0 : '-100%',color: `${colorList[background - 1]}`,boxShadow:'0 0 10px 0 rgba(0,0,0,.4)'}"
				@touchend.stop>
				<!-- <view class="bookname">{{BookInfo.name}}</view> -->
				<!--  :size="40"——每一栏高度为40px  :scrollHeight="windowHeight - 60"——书名的高度为60px -->
				<virtual-list1 :items="directoryList" :size="40":chapter="chapter_num" :remain="16" :bookInfo="BookInfo" :active="curChapter.chapterIndex"
					:scrollHeight="windowHeight - 60">
					<template v-slot="{item,active}">
						<view class="directory-listItem" :class="{active: item.id == active}"
							@click="goToChapter(item.id)">
							{{item.name}}
						</view>
					</template>
				</virtual-list1>
			</view>
		</view>
		<wyb-popup ref="popup" type="center" radius="6" :showCloseIcon="false" :scrollY="true" height="800" width="600">
			<view class="yuanba">
				<view class="text-xl">{{BookInfo.name}}</view>
				<view class="margin-top">{{BookInfo.author}}</view>
			</view>

			<view class="cu-list menu-rand">

				<view class="cu-item" v-for="(item,index) in listData" :key="item.id" @click="switchs(item)">
					<view>
						<view>{{item.chapter}}</view>
						<view> {{item.source.book_name}}_{{item.author}}</view>
					</view>
					<view v-show="item.source.book_name==source_name && item.author==BookInfo.author">✓</view>
				</view>

			</view>

		</wyb-popup>
	</view>
</template>

<script>
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
	import AD from "@/util/ad.js"
	import time from '@/util/getdateTime.js';
	
	import _tool from '@/util/tools.js';
	import _bookshelf from '@/util/bookshelf.js';
	
	let rewardedVideoAd = null //激励视频
	// 在页面中定义激励视频广告
	let interstitialAd = null //激励调用
	import virtualList1 from '@/components/virtualList1.vue'
	import {
		traditionalized,
		simplized,
		dateToStr
	} from '@/utils/utils.js'
	export default {
		components: {
			
			virtualList1,
			wybPopup
		},
		data() {
			return {
				scrollTop:0,
				scrollstatus:false,
				isloading:false,
				scroll_times: 0,
				show:true,
				bookName: this.$t('read.name'),
				bookId: 1,
				Refreshis: false,
				history: { //本书历史记录
					chapterIndex: 0,
					progress: 0
				},
				chapter_num:0,
				wifi: false,
				text: this.$t('read.rnjzz'),
				directoryList: [], //目录列表
				currentPage: 0, //当前页
				BookData: {}, //作品内容
				innerHeight: 0, //截取至整行的最大高度
				preChapter: { //上一章数据
					ready: false, //是否准备完毕
					chapterIndex: '',
					chapterName: '',
					text: '',
					link: '',
					totalPage: '',
					canRead: true
				},
				curChapter: { //本一章数据
					chapterIndex: '',
					chapterName: '',
					text: '',
					link: '',
					totalPage: '',
					canRead: true
				},
				nextChapter: { //下一章数据
					ready: false, //是否准备完毕
					chapterIndex: '',
					chapterName: '',
					text: '',
					link: '',
					totalPage: '',
					canRead: true
				},
				tmpChapter: { //暂存章节内容
					text: '',
					canRead: true
				},
				cover: { //封面的状态
					pageTranslate: ['', '', ''], //页面位移，三个数对应三种翻页方式
				},
				prePage: { //上一页数据
					ready: false, //是否准备完毕
					chapterName: '',
					text: '',
					pageNum: '',
					totalPage: 1,
					pageTranslate: ['', '', ''], //页面位移，三个数对应三种翻页方式
					canRead: true
				},
				curPage: { //本页数据
					ready: false, //是否准备完毕
					chapterName: '',
					text: '',
					pageNum: 1,
					totalPage: 1,
					pageTranslate: ['', '', ''], //页面位移，三个数对应三种翻页方式
					canRead: true
				},
				nextPage: { //下一页数据
					ready: false, //是否准备完毕
					chapterName: '',
					text: '',
					pageNum: '',
					totalPage: '',
					pageTranslate: ['', '', ''], //页面位移，三个数对应三种翻页方式
					canRead: true
				},
				next: false, //用户是否正在翻下一页
				pre: false, //用户是否正在翻上一页
				waitForNext: false, //是否正在等待下一页准备完毕后跳转
				waitForPre: false, //是否正在等待上一页准备完毕后跳转
				waitForNextChapter: false, //是否正在等待下一章准备完毕后跳转
				waitForPreChapter: false, //是否正在等待上一章准备完毕后跳转
				showAnimation: false, //是否开启动画
				showShadow: false, //是否显示页面阴影
				windowWidth: 0, //可用屏幕宽度
				windowHeight: 0, //可用屏幕高度
				contentHeight: 0, //阅读区域高度
				platform: '', //设备
				
				systemTime: '', //系统时间
				systemTimeStr: '', //系统时间字符串
				statusBarHeight: 0, //状态栏高度
				pixelRatio: '', //设备像素比
				touchStartX: 0, // 触屏起始点x
				touchX: 0, // 瞬时触屏点x
				delta: 0, // 手指瞬时位移
				touchStartY: 0, // 触屏起始点y
				touchY: 0, // 瞬时触屏点y
				menuShow: false, //菜单栏box是否渲染
				itemShow: false, // 菜单栏动画控制
				settingShow: false, //设置栏动画控制
				directoryShow: false, //目录动画控制
				directoryShowBefore: false, // 目录渲染
				turnPageTime: .5, //翻页动画时间
				maxFontSize: 30, //最大字体大小，px
				minFontSize: 14, //最小字体大小，px
				turnType: 2, //翻页方式
				fontSize: '20', //字体大小，
				simplified: '', //是否简体
				danshou: '',
				lineHeight: 4, //行高，注意是fontSize的倍数
				background: '', //背景
				colorList: ['#000', '#666'], //与背景对应的字体颜色
				BookInfo: {},
				chapterProgress: 0, //‘章节进度条’的参数
				progressTouched: false, //是否正在点击‘章节进度条’
				sqllist: [],
				listData: [],
				source_name: '',
				timearr: '',
				config: {},
				addtBtn: true,
				adis: 0,
				tt: 0,
				zhong: 0,
				loading: false,
				_isLoaded: false,
				jlappad:''
			}
		},
		onBackPress() {

			clearInterval(this.timearr)
		},
		onLoad() {
			
			 wx.loadFontFace({
			    family: 'MyFont',
			    source: 'url("https://api.wx-api.online/HYXuanSong.1742895088825.A1Y6apwPXTxixy9rM3TfwPYDzY.ttf")',
			    success() {
			      console.log('字体加载成功')
			    }
			  })
			wx.loadFontFace({
			   family: 'MyFont1',
			   source: 'url("https://wximg.qq.com/cityservices/B2b-Pay/SF-Pro-Text-Regular.otf")',
			   success() {
			     console.log('字体加载成功')
			   }
			 })
			this.config = uni.getStorageSync('config');
			this.getSystemInfo()
			
			// #ifdef  MP

			this.jlad()
			// #endif 
		uni.setStorageSync('adis',0)

		},

		onUnload() {

			

			this.setStorage()
		},
		onHide() {
			// #ifdef  MP
			if (this.zhong) {
				this.zengjia()
			}
			// #endif 
			this.setStorage()
		},
		onShow() {


			this.config = uni.getStorageSync('config');
			// #ifdef  MP

			//this.zengjia()
			this.sqllist = uni.getStorageSync('shuyuan1')
			// #endif 
		},
		onReady() {
			
		},
		onUnload() {
			
		},
		mounted() {


			//获取缓存信息
			try {

				const BookReadData = uni.getStorageSync('BookReadData');
				this.BookData = BookReadData;
				let size=uni.getStorageSync('book_list1'+this.bookId)+uni.getStorageSync('book_list2'+this.bookId) ?JSON.parse(uni.getStorageSync('book_list1'+this.bookId)+uni.getStorageSync('book_list2'+this.bookId)) : this.BookData.list
				this.chapter_num = size.length
				// uni.showLoading({
				// 	title: '加载中,请稍后...'
				// });
				this.bookId = BookReadData.id
				this.BookData.list=size;
				this.BookData = BookReadData;
				this.source_name = this.BookData.data.source.book_name
				//判断上一级是否存在分类数据
				if (this.BookData.list.length > 0) {
					this.BookInfo = this.BookData.data;
					this.directoryList = this.BookData.list;
					
					this.initPage()
				} else {

					this.GetBookDetails(this.BookData.id);
				}


			} catch (e) {
				uni.showToast({
					title: this.$t('book.sjyc'),
					icon: 'none'
				});
			}

		},
		computed: {
			progress() { //章节的阅读进度
				if (this.curChapter.totalPage === 1) {
					return 0
				}
				return this.currentPage / (this.curChapter.totalPage - 1)
			}
		},
		methods: {
			onScroll(event) {
				  
			      //const { scrollTop } = event.detail;
				
				  //console.log(event)
				  
				  if(event.detail.scrollTop<1){
					  console.log('上去')
					  //this.scrollstatus = true
					  //this.goPreChapter()
				  }
				 

			    },
			onScrollToTop(e){
				
				//this.goPreChapter()
				
				
				
			},
			onScrollToLower() {
				console.log("到底部了",this.isloading)
			    if (this.curChapter.chapterIndex < this.directoryList.length - 1 && !this.isloading) {
				  console.log(this.curChapter.text.length,'长度')
				  // if(this.curChapter.text.length>=30000){
					 //  this.curChapter.text = this.curChapter.text.slice(20000)
				  // }
				  if(this.scroll_times==7||this.curChapter.text.length>=30000){
					  setTimeout(res => {
					  this.scroll_times=0
					  this.goToChapter(this.curChapter.chapterIndex+1)
					  if(this.scrollTop==1){
					  		this.scrollTop=2
					  	}else{
					  	  this.scrollTop=1
					  	}
					  }, 500)
				  }else{
					  this.loadNextChapter();
				  }
			    }
			  },
		  async loadNextChapter() {
			  this.isloading = true
			  if (this.curChapter.chapterIndex === this.directoryList.length - 1) {
				uni.showToast({
				  title: this.$t('read.zsdyz'),
				  icon: 'none'
				});
				return;
			  }// 获取下一章内容
			  console.log("获取下一章")
			await this.getOneChapter(this.directoryList[this.curChapter.chapterIndex + 1].chapterId);
			// 将下一章内容追加到当前章节
			//this.curChapter = { ...this.curChapter, text: this.curChapter.text + this.tmpChapter.text };
			this.curChapter.chapterIndex += 1;
			// 更新章节名称
			this.curChapter.chapterName = this.directoryList[this.curChapter.chapterIndex].name;
			this.$set(this.curChapter, 'text', this.curChapter.text +"<p style='font-size: 25px;;margin-left: -35px;cursor: default;letter-spacing: 2px;line-height: 1.5;margin-top: 50px;margin-bottom: 50px;font-family:MyFont;display:block'>" + this.curChapter.chapterName+ "</p>"+ this.tmpChapter.text);
			// 更新章节索引
			
			
			//this.goNextChapter()
		  },
			createInterstitialAd() {
				interstitialAd = this.interstitialAd = uni.createInterstitialAd({
					'adpid': this.config.app_ad_ys_cp
				});
				interstitialAd.onLoad(() => {
					this.loading = false;
					console.log("插屏 广告加载成功");
				});
				interstitialAd.onClose(() => {
					// 用户点击了关闭或返回键(仅Android有返回键)
					console.log("插屏 广告关闭");
				});
				interstitialAd.onError((err) => {
					this.loading = false;
					console.log("插屏 广告加载失败");
				});

				// 广告实例创建成功后默认会执行一次 load，加载广告数据
				// 如果界面有 "显示广告" 按钮，需要先禁用掉，防止用户点击，等待广告数据加载成功后在放开
				this.loading = true;
			},
			showInterstitialAd() {
				// 调用 interstitialAd.show()，如果数据正在加载中不会显示广告，加载成功后才显示
				// 在数据没有加载成功时，需要防止用户频繁点击显示广告
				if (this.loading == true) {
					return
				}
				this.loading = true;
				this.interstitialAd.show().then(() => {
					this.loading = false;
				});
			},
			showAd() {
			        // 调用后会显示 loading 界面
			        AD.show({
			          adpid:this.config.app_ad_jl, // HBuilder 基座测试广告位
			          adType: "RewardedVideo",
			          //singleton: false // 设置此参数后，每次调用 show 方法将重新创建广告实例，预载将失效，如果广告回调每次要透传用户信息需要设置 false
			        }, (res) => {
			          // 用户点击了【关闭广告】按钮
			          if (res && res.isEnded) {
			            // 正常播放结束
						this.zengjia()
			            console.log("onClose " + res.isEnded);
			          } else {
			            // 播放中途退出
			           if (this.adis && this.zhong) {
			           	uni.showToast({
			           		icon: 'none',
			           		title: '中途关闭了广告，无法为您免除广告时长',
			           		duration: 2000
			           	});
			           
			           
			           } else {
			           	uni.showToast({
			           		icon: 'none',
			           		title: '中途关闭了广告，无法为您免除广告时长',
			           		duration: 2000
			           	});
			           
			           }
			          }
			
			          // 在此处理服务器回调逻辑
			        }, (err) => {
			          // 广告加载错误
					  uni.showToast({
					  	title: '当前未获取到广告资源，请稍后再试',
						icon:'none',
					  	duration: 3000
					  });
			          console.log(err)
			        })
			      },
			jlad() {

				if (wx.createRewardedVideoAd) {
					rewardedVideoAd = wx.createRewardedVideoAd({
						adUnitId: this.config.wx_ad_jl
					})
					rewardedVideoAd.onLoad(() => {
						console.log('onLoad event emit')
						this.adis = 0
					})
					rewardedVideoAd.onError((err) => {
						console.log('onError event emit', err)
						uni.showToast({
							icon:'none',
							title: '当前未获取到广告资源，请稍后再试',
							duration: 2000
						});
						this.adis = 0
					})
					rewardedVideoAd.onClose((res) => {
						// 用户点击了【关闭广告】按钮
						this.adis = 0

						if (res && res.isEnded) {

							this.zengjia()

							console.log('正常播放结束，可以下发游戏奖励')
							// 正常播放结束，可以下发游戏奖励
						} else {
							if (this.adis && this.zhong) {
								uni.showToast({
									icon: 'none',
									title: '中途关闭了广告，无法为您免除广告时长',
									duration: 2000
								});


							} else {
								uni.showToast({
									icon: 'none',
									title: '中途关闭了广告，无法为您免除广告时长',
									duration: 2000
								});

							} 
							// 播放中途退出，不下发游戏奖励
							console.log('播放中途退出，不下发游戏奖励')
						}
					})

				}


				// 在页面onLoad回调事件中创建插屏广告实例
				if (wx.createInterstitialAd) {
					interstitialAd = wx.createInterstitialAd({
						adUnitId: this.config.wx_ad_ys_cp
					})
					interstitialAd.onLoad(() => {})
					interstitialAd.onError((err) => {})
					interstitialAd.onClose(() => {})
				}
			},
			wxad() {

				this.adis = 1
				let sum = 0;
				let urls = [];
				for (let i = 0; i < 100 / parseInt(this.config.task_wx_statussj); i++) {
					urls.push(i+1);
				}
				var element = urls[Math.floor((Math.random() * urls.length))]
				if (element === urls.length) {
					uni.showToast({
						icon: 'none',
						title: this.config.task_wx_q_name,
						duration: 2000
					});
					this.zhong = 1;
					console.log('启动了强点', this.zhong)
				} else {
					uni.showToast({
						icon: 'none',
						title: this.config.task_wx_b_name,
						duration: 2000
					});
					this.zhong = 0;
					console.log('未启动强点', this.zhong)
				}
				
			
			// #ifdef  APP-PLUS
			
			
			
			this.showAd()
			
			// #endif 
				// #ifdef  MP
				
				setTimeout(res => {
				
					rewardedVideoAd.show().then(() => console.log('激励视频 广告显示'))
				}, 1000)
				// #endif 
				
			},
			zengjia() {
				this.config = uni.getStorageSync('config');
				this.tt = parseInt(uni.getStorageSync('config_time'));
				if (this.adis && this.zhong) {

					let times = this.tt ? (this.tt + parseInt(this.config.task_wx_status_j_time)) : parseInt(this.config
						.task_wx_status_j_time)

					if (this.tt < time.dtime()) {
						this.tt = 0
					}
					let st = this.tt ? time.timej(times, this.tt) : time.timej(times, 0)
					uni.setStorageSync('config_time', st);
					uni.showToast({
						icon: 'none',
						title: '免除广告成功！点击下一页将会免除',
						duration: 2000
					});
				} else {
					let times = this.tt ? (this.tt + parseInt(this.config.task_wx_status_b_time)) : parseInt(this.config
						.task_wx_status_b_time)

					if (this.tt < time.dtime()) {
						this.tt = 0
					}
					let st = this.tt ? time.timej(times, this.tt) : time.timej(times, 0)
					uni.setStorageSync('config_time', st);
					uni.showToast({
						icon: 'none',
						title: '免除广告成功！',
						duration: 2000
					});
				}


			},
			adLoad() {
				console.log("启动了广告");
			},
			listener(e) {

				console.log(e)
			},
			GetBookDetails(id) {

				// let url = this.BookData.data.source.body_url.replace("{{key}}", id); 
				// url=url.replace("{{key1}}", this.BookData.sid);  
				let url = this.BookInfo.source.rand_url.replace("{{key}}", id);
				console.log('url', url)
				this.zaiApi({
					url: url,
				}).then(res => {
					this.GetDetailsData(res)
				});
			},
			GetDetailsData(Book) { //获取目录和章节
				_tool.DetailsData(Book, this.BookInfo.source).then(res => {
					this.BookInfo = res.data;
					this.directoryList = res.list;
					this.BookData.list = this.directoryList
					this.initPage()
				});
			},
			setStorage() {
				let history = uni.getStorageSync('history')
				if (typeof history !== 'object') {
					history = []
				}
				let have = false
				history.forEach((value) => {
					if (value.bookId === this.bookId) {
						have = true
						value.chapterIndex = this.curChapter.chapterIndex
						value.progress = this.progress
					}
				})
				if (!have) {
					history.push({
						bookId: this.bookId,
						chapterIndex: this.curChapter.chapterIndex,
						progress: this.progress
					})
				}
				uni.setStorageSync('history', history)
			},

			/**
			 * 返回上一页面
			 **/
			return_back() {
				console.log(222)
				// clearInterval(this.timearr)
				// uni.setStorageSync('details' + this.BookData.id, this.BookData);
				uni.navigateBack({
				    delta: 1 // 返回上一页，如果需要返回多级页面，可以设置为更大的数字
				  });
			},

			/**
			 * 获取设备信息
			 **/
			getSystemInfo() {
				const BookReadData = uni.getStorageSync('BookReadData');
				this.bookId = BookReadData.id
				const {
					windowWidth,
					windowHeight,
					statusBarHeight,
					platform,
					pixelRatio
				} = uni.getSystemInfoSync()
				//获取一些必要的设备参数
				this.statusBarHeight = statusBarHeight
				this.windowWidth = windowWidth
				this.windowHeight = windowHeight
				this.pixelRatio = pixelRatio
				this.platform = platform
				

				// 设置时间
				let date = new Date();
				this.systemTime = Date.parse(date);
				this.systemTimeStr = dateToStr(this.systemTime);
				setInterval(() => {
					this.systemTime += 60000;
					this.systemTimeStr = dateToStr(this.systemTime);
				}, 60000)

				// 获取字体、排版等信息

				/*****************************************/
				/**********    根据需要更改    ************/
				/*****************************************/

				//可能缓存在前端可能从后端拿，如果是异步注意同步处理
				this.fontSize = uni.getStorageSync('fontSize')
				if (typeof this.fontSize !== 'number') {
					this.fontSize = 18
				}
				this.simplified = uni.getStorageSync('simplified')
				if (typeof this.simplified !== 'number') {
					this.simplified = 1
				}
				this.danshou = uni.getStorageSync('danshou')

				if (typeof this.danshou !== 'number') {
					this.danshou = 1
				}

				this.lineHeight = uni.getStorageSync('lineHeight')
				if (typeof this.lineHeight !== 'number') {
					this.lineHeight = 2
				}
				this.background = uni.getStorageSync('background')
				if (typeof this.background !== 'number') {
					this.background = 3
				}
				this.turnType = uni.getStorageSync('turnType')
				if (typeof this.turnType !== 'number') {
					this.turnType = 2
				}
				let history = uni.getStorageSync('history')
				if (typeof history !== 'object') {
					history = []
				}

				history.forEach((value) => {
					if (value.bookId === this.bookId) {
						this.history = value
					}
				})

				/*****************************************/
				/*****************************************/
				/*****************************************/

			},

			/**
			 * 获取数据并计算页面
			 **/
			async initPage() {
				let history = uni.getStorageSync('history')

				this.cover.pageTranslate = [
					`(${-this.windowWidth}px,0)`,
					`(${-this.windowWidth}px,0)`,
					`(0,${-this.windowHeight}px)`
				]
				_tool.GetBookListID(this.BookData.name).then((res) => {
					this.addtBtn = res;
				});
				await this.calcHeight()
				//await this.getDirectoryList()
				if (this.BookData.sid === 0) {
					if (this.history.chapterIndex > this.directoryList.length - 1 || !this.history.chapterIndex) {
						this.history.chapterIndex = 0
					}
				} else {
					this.history.chapterIndex = this.BookData.sid

				}

				await this.getThreeChapter(this.history.chapterIndex)
				if (uni.getStorageSync('turnType') === 3) {
					var page = Math.floor((this.curChapter.totalPage - 1) * this.history.progress) + 1
				} else {
					var page = Math.floor((this.curChapter.totalPage - 1) * this.history.progress)
				}

				this.goToPage(page)
				//uni.hideLoading()
				_bookshelf.GetBookadd(this.BookInfo.name).then((res) => {
					this.addBtn = true;
				});
				this.istime()

			},
			istime() {

				let data = this.BookInfo;
				this.timearr = setInterval(function() {
					_bookshelf.hettimes(data).then((res) => {});
				}, 1000);
					
			},
			/**
			 * 计算innerHeight，用于截取至整行
			 **/
			calcHeight() {


				if (this.contentHeight) {

					let lineHeight = this.fontSize * this.lineHeight;
					// #ifdef APP-PLUS || MP || H5
					lineHeight = Math.floor(lineHeight * this.pixelRatio) / this.pixelRatio
					// #endif
					let lineNum = Math.floor((this.contentHeight + Math.floor((lineHeight - this.fontSize) / 2)) /
						lineHeight)
					this.innerHeight = lineNum * lineHeight
				} else {
					return new Promise((resolve, reject) => {
						this.$nextTick(() => {
							const query = uni.createSelectorQuery().in(this);
							query.select('#content').boundingClientRect(data => {
								let height = data.height;
								this.contentHeight = height;
								let lineHeight = this.fontSize * this.lineHeight;

								// #ifdef APP-PLUS || MP || H5
								lineHeight = Math.floor(lineHeight * this.pixelRatio) / this
									.pixelRatio
								// #endif
								let lineNum = Math.floor((height + Math.floor((lineHeight - this
										.fontSize) / 2)) /
									lineHeight)
								this.innerHeight = lineNum * lineHeight

								resolve()
							}).exec();
						})

					})
				}

			},

			/**
			 * 计算本章页数
			 **/
			calcCurChapter() {
				return new Promise((resolve, reject) => {
					// 此处setTimeout 100ms是为了确保元素渲染完毕从而获取正确高度，如果遇到页面页数计算不正确的情况可以增加时间试试看
					setTimeout(() => {
						const query = uni.createSelectorQuery().in(this);
						query.select('#curChapter').boundingClientRect(data => {
							let height = data.height;
							// #ifdef APP-PLUS || MP || H5

							height = Math.round(height * this.pixelRatio) / this.pixelRatio
							// #endif
							this.curChapter.totalPage = Math.ceil(height / this.innerHeight) || 1
							this.curChapter.ready = true //章节准备完毕
							resolve()
						}).exec();
					}, 100)

				})
			},

			/**
			 * 计算上一章页数,并翻页（如果有）
			 **/
			calcPreChapter() {
				return new Promise((resolve, reject) => {
					// 此处setTimeout 100ms是为了确保元素渲染完毕从而获取正确高度，如果遇到页面页数计算不正确的情况可以增加时间试试看
					setTimeout(() => {
						const query = uni.createSelectorQuery().in(this);
						query.select('#preChapter').boundingClientRect(data => {
							let height = data.height;
							// #ifdef APP-PLUS || MP || H5
							height = Math.round(height * this.pixelRatio) / this.pixelRatio
							// #endif
							this.preChapter.totalPage = Math.ceil(height / this.innerHeight) || 1
							this.preChapter.ready = true //章节准备完毕
							if (this.waitForPre) { //发生在用户翻至上一章，但是上一章数据未准备完毕时
								//uni.hideLoading() //把loading关掉
								this.waitForPre = false;
								//页面准备完毕
								this.goPrePage()
							}
							if (this.waitForPreChapter) {
								//uni.hideLoading()
								this.waitForPreChapter = false
								this.goPreChapter()
							}
							resolve()
						}).exec();
					}, 100)

				})

			},
			AddClick() {

				let bookData = {
					id: this.BookData.id,
					sid: this.history.chapterIndex,
					page: 0,
					index: 1,
					name: this.BookData.name,
					title: this.BookData.name,
					img: this.BookData.img,
					data: this.BookData.data,
					list: this.directoryList
				};
				_tool.AddBookListData(bookData).then((res) => {
					this.addtBtn = true;
				});
			},
			/**
			 * 计算下一章页数,并翻页（如果有）
			 **/
			calcNextChapter() {


				return new Promise((resolve, reject) => {
					// 此处setTimeout 100ms是为了确保元素渲染完毕从而获取正确高度，如果遇到页面页数计算不正确的情况可以增加时间试试看
					setTimeout(() => {
						const query = uni.createSelectorQuery().in(this);
						query.select('#nextChapter').boundingClientRect(data => {
							let height = data.height;
							// #ifdef APP-PLUS || MP || H5
							height = Math.round(height * this.pixelRatio) / this.pixelRatio
							// #endif
							this.nextChapter.totalPage = Math.ceil(height / this.innerHeight) || 1
							this.nextChapter.ready = true //章节准备完毕
							if (this.waitForNext) { //发生在用户翻至下一章，但是下一章数据未准备完毕时
								//uni.hideLoading() //把loading关掉
								this.waitForNext = false;
								//页面准备完毕

								this.goNextPage()
							}
							if (this.waitForNextChapter) {


								//uni.hideLoading()
								this.waitForNextChapter = false
								this.goNextChapter()
							}
							resolve()
						}).exec();

					}, 100)

				})

			},

			/**
			 * 触摸开始（封面）
			 **/
			coverTouchStart(e) {
				this.showAnimation = false //关掉动画，否则翻页会很慢
				this.touchX = e.touches[0].clientX
				this.touchStartX = e.touches[0].clientX
				this.touchY = e.touches[0].clientY
				this.touchStartY = e.touches[0].clientY
			},

			/**
			 * 触摸（封面）
			 **/
			coverTouchMove(e) {
				this.showShadow = true
				console.log('e', 2222)
				let delta = 0
				if (this.turnType === 0 || this.turnType === 1) { //翻页方式为‘覆盖’或者‘左右平移’
					delta = e.touches[0].clientX - this.touchStartX;

					// 限制边界
					if (delta > this.windowWidth) {
						delta = this.windowWidth
					}
					if (delta < -this.windowWidth) {
						delta = -this.windowWidth
					}

					this.delta = e.touches[0].clientX - this.touchX;
					this.touchX = e.touches[0].clientX;
				} else { //翻页方式为‘上下平移’
					delta = e.touches[0].clientY - this.touchStartY;

					// 限制边界
					if (delta > this.windowHeight) {
						delta = this.windowHeight
					}
					if (delta < -this.windowHeight) {
						delta = -this.windowHeight
					}

					this.delta = e.touches[0].clientY - this.touchY;
					this.touchY = e.touches[0].clientY;
				}

				if (this.next) { //首次翻下一页之后

					// 限制边界
					if (delta > 0) {
						delta = 0
					}

					this.cover.pageTranslate = [
						`(${delta}px,0)`,
						`(${delta}px,0)`,
						`(0,${delta}px)`,
						`(${delta}px,0)`
					]
					this.curPage.pageTranslate = [
						`(0,0)`,
						`(${this.windowWidth + delta}px,0)`,
						`(0,${this.windowHeight + delta}px)`,
						`(0,0)`
					]
				}
				if (!this.pre && !this.next && delta < 0) { //首次翻下一页
					this.next = true
					this.cover.pageTranslate = [
						`(${delta}px,0)`,
						`(${delta}px,0)`,
						`(0,${delta}px)`,
						`(${delta}px,0)`
					]
					this.curPage.pageTranslate = [
						`(0,0)`,
						`(${this.windowWidth + delta}px,0)`,
						`(0,${this.windowHeight + delta}px,)`,
						`(0,0)`
					]
				}
				if (this.pre) { //首次右滑后，由于是封面不做任何操作
					return
				}
				if (!this.pre && !this.next && delta > 0) { //首次右滑
					this.pre = true
					uni.showToast({
						title: this.$t('read.yjszsyy'),
						icon: 'none'
					})
				}


			},

			/**
			 * 触摸结束（封面）
			 **/
			coverTouchEnd(e) {
				this.showAnimation = true
				this.showShadow = false
				let delta = 0
				if (this.turnType === 0 || this.turnType === 1) { //翻页方式为‘覆盖’或者‘左右平移’
					delta = e.changedTouches[0].clientX - this.touchStartX;
				} else { //翻页方式为‘上下平移’
					delta = e.changedTouches[0].clientY - this.touchStartY;
				}
				if (delta === 0) {
					if (e.changedTouches[0].clientX < this.windowWidth / 3) { //点击屏幕左1/3为上一页
						uni.showToast({
							title: this.$t('read.yjszsyy'),
							icon: 'none'
						})
					} else if (e.changedTouches[0].clientX > this.windowWidth / 3 * 2) { //点击屏幕右1/3为下一页
						this.cover.pageTranslate = [
							`(${-this.windowWidth}px,0)`,
							`(${-this.windowWidth}px,0)`,
							`(0,${-this.windowHeight}px)`
						]
						this.curPage.pageTranslate = [
							`(0,0)`,
							`(0,0)`,
							`(0,0)`
						]
					} else if (e.changedTouches[0].clientX <= this.windowWidth / 3 * 2 && e.changedTouches[0].clientX >=
						this
						.windowWidth / 3) { //点击屏幕中间1/3为呼出菜单
						this.showMenu()
					}
				} else {
					if (this.next && this.delta <= 0) { //下一页
						this.cover.pageTranslate = [
							`(${-this.windowWidth}px,0)`,
							`(${-this.windowWidth}px,0)`,
							`(0,${-this.windowHeight}px)`
						]
						this.curPage.pageTranslate = [
							`(0,0)`,
							`(0,0)`,
							`(0,0)`
						]
					} else if (this.next && this.delta > 0) { //取消翻页
						this.cover.pageTranslate = [
							`(0,0)`,
							`(0,0)`,
							`(0,0)`
						]
						this.curPage.pageTranslate = [
							`(0,0)`,
							`(${this.windowWidth}px,0)`,
							`(0,${this.windowHeight}px)`
						]
					}
				}
				this.next = false
				this.pre = false

			},

			/**
			 * 触摸取消（封面）
			 **/
			coverTouchcancel() {

				// 取消翻页
				this.showAnimation = false
				this.showShadow = false
				this.cover.pageTranslate = [
					`(0,0)`,
					`(0,0)`,
					`(0,0)`
				]
				this.curPage.pageTranslate = [
					`(0,0)`,
					`(${this.windowWidth}px,0)`,
					`(0,${this.windowHeight}px)`
				]
				this.next = false
				this.pre = false
			},

			/**
			 * 触摸开始
			 **/
			touchStart(e) {

				//console.log(e,3333)
				this.showAnimation = false
				this.touchX = e.touches[0].clientX;
				this.touchStartX = e.touches[0].clientX;
				this.touchY = e.touches[0].clientY;
				this.touchStartY = e.touches[0].clientY;
			},

			/**
			 * 触摸
			 **/
			touchMove(e) {

				this.showShadow = true;
				let delta = 0
				if (this.turnType === 0 || this.turnType === 1) { //翻页方式为‘覆盖’或者‘左右平移’
					delta = e.touches[0].clientX - this.touchStartX;

					// 限制边界
					if (delta > this.windowWidth) {
						delta = this.windowWidth
					}
					if (delta < -this.windowWidth) {
						delta = -this.windowWidth
					}

					this.delta = e.touches[0].clientX - this.touchX;
					this.touchX = e.touches[0].clientX;
				} else { //翻页方式为‘上下平移’
					// delta = e.touches[0].clientY - this.touchStartY;

					// // 限制边界
					// if (delta > this.windowHeight) {
					// 	delta = this.windowHeight
					// }
					// if (delta < -this.windowHeight) {
					// 	delta = -this.windowHeight
					// }

					// this.delta = e.touches[0].clientY - this.touchY;
					// this.touchY = e.touches[0].clientY;
				}

				if (this.next && this.nextPage.ready) { //首次翻下一页之后
					if (this.nextPage.isEnd) {
						return
					}

					// 限制边界
					if (delta > 0) {
						delta = 0
					}

					this.prePage.pageTranslate = [
						`(${-this.windowWidth}px,0)`,
						`(${-this.windowWidth+delta}px,0)`,
						`(0,${-this.windowHeight+delta}px)`
					]
					this.curPage.pageTranslate = [
						`(${delta}px,0)`,
						`(${delta}px,0)`,
						`(0,${delta}px)`
					]
					this.nextPage.pageTranslate = [
						`(0,0)`,
						`(${this.windowWidth+delta}px,0)`,
						`(0,${this.windowHeight+delta}px)`
					]
				}

				if (!this.pre && !this.next && delta < 0) { //首次翻下一页
					this.next = true
					if (this.nextPage.ready) { //页面准备好了
						if (this.nextPage.isEnd) {


							/*****************************************/
							/**********    根据需要更改    ************/
							/*****************************************/
							uni.showToast({
								title: this.$t('read.myzxnr'),
								icon: 'none'
							})
							/*****************************************/
							/*****************************************/
							/*****************************************/


						} else {
							this.prePage.pageTranslate = [
								`(${-this.windowWidth}px,0)`,
								`(${-this.windowWidth+delta}px,0)`,
								`(0,${-this.windowHeight+delta}px)`
							]
							this.curPage.pageTranslate = [
								`(${delta}px,0)`,
								`(${delta}px,0)`,
								`(0,${delta}px)`
							]
							this.nextPage.pageTranslate = [
								`(0,0)`,
								`(${this.windowWidth+delta}px,0)`,
								`(0,${this.windowHeight+delta}px)`
							]
						}
					} else if (this.nextChapter.ready) { //下一章已经准备好了
						this.nextPage = {
							ready: this.nextChapter.ready,
							chapterName: this.nextChapter.chapterName,
							text: this.nextChapter.text,
							pageNum: 0,
							totalPage: this.nextChapter.totalPage,
							pageTranslate: [
								`(0,0)`,
								`(${this.windowWidth}px,0)`,
								`(0,${this.windowHeight}px)`
							],
							canRead: this.nextChapter.canRead
						}
						this.prePage.pageTranslate = [
							`(${-this.windowWidth}px,0)`,
							`(${-this.windowWidth+delta}px,0)`,
							`(0,${-this.windowHeight+delta}px)`
						]
						this.curPage.pageTranslate = [
							`(${delta}px,0)`,
							`(${delta}px,0)`,
							`(0,${delta}px)`
						]
						this.nextPage.pageTranslate = [
							`(0,0)`,
							`(${this.windowWidth+delta}px,0)`,
							`(0,${this.windowHeight+delta}px)`
						]
					}
				}
				if (this.pre && this.prePage.ready) { //首次翻上一页之后

					// 限制边界
					if (delta < 0) {
						delta = 0
					}

					if (this.prePage.isCover) { //上一页是封面
						this.cover.pageTranslate = [
							`(${-this.windowWidth+delta}px,0)`,
							`(${-this.windowWidth+delta}px,0)`,
							`(0,${-this.windowHeight+delta}px)`
						]
						this.curPage.pageTranslate = [
							`(0,0)`,
							`(${delta}px,0)`,
							`(0,${delta}px)`
						]
					} else {
						this.prePage.pageTranslate = [
							`(${-this.windowWidth+delta}px,0)`,
							`(${-this.windowWidth+delta}px,0)`,
							`(0,${-this.windowHeight+delta}px)`
						]
						this.curPage.pageTranslate = [
							`(0,0)`,
							`(${delta}px,0)`,
							`(0,${delta}px)`
						]
						this.nextPage.pageTranslate = [
							`(0,0)`,
							`(${this.windowWidth+delta}px,0)`,
							`(0,${this.windowHeight+delta}px)`
						]
					}
				}
				if (!this.pre && !this.next && delta > 0) { //首次翻上一页
					this.pre = true
					if (this.prePage.ready) { //页面准备好了
						if (this.prePage.isCover) { //上一页是封面
							this.cover.pageTranslate = [
								`(${-this.windowWidth+delta}px,0)`,
								`(${-this.windowWidth+delta}px,0)`,
								`(0,${-this.windowHeight+delta}px)`
							]
							this.curPage.pageTranslate = [
								`(0,0)`,
								`(${delta}px,0)`,
								`(0,${delta}px)`
							]
						} else {
							this.prePage.pageTranslate = [
								`(${-this.windowWidth+delta}px,0)`,
								`(${-this.windowWidth+delta}px,0)`,
								`(0,${-this.windowHeight+delta}px)`
							]
							this.curPage.pageTranslate = [
								`(0,0)`,
								`(${delta}px,0)`,
								`(0,${delta}px)`
							]
							this.nextPage.pageTranslate = [
								`(0,0)`,
								`(${this.windowWidth+delta}px,0)`,
								`(0,${this.windowHeight+delta}px)`
							]
						}
					} else if (this.preChapter.ready) { //上一章已经准备好了
						this.prePage = {
							ready: this.preChapter.ready,
							chapterName: this.preChapter.chapterName,
							text: this.preChapter.text,
							pageNum: this.preChapter.totalPage - 1,
							totalPage: this.preChapter.totalPage,
							pageTranslate: [
								`(${-this.windowWidth}px,0)`,
								`(${-this.windowWidth}px,0)`,
								`(0,${-this.windowHeight}px)`
							],
							canRead: this.preChapter.canRead
						}
						this.prePage.pageTranslate = [
							`(${-this.windowWidth+delta}px,0)`,
							`(${-this.windowWidth+delta}px,0)`,
							`(0,${-this.windowHeight+delta}px)`
						]
						this.curPage.pageTranslate = [
							`(0,0)`,
							`(${delta}px,0)`,
							`(0,${delta}px)`
						]
						this.nextPage.pageTranslate = [
							`(0,0)`,
							`(${this.windowWidth+delta}px,0)`,
							`(0,${this.windowHeight+delta}px)`
						]
					}
				}

			},

			/**
			 * 触摸结束
			 **/
			touchEnd(e) {

				this.showAnimation = true
				this.showShadow = false
				let delta = 0
				if (this.turnType === 0 || this.turnType === 1) {
					delta = e.changedTouches[0].clientX - this.touchStartX;
				} else {
					delta = e.changedTouches[0].clientY - this.touchStartY;

				}
				if (delta < 0.8 && delta > -0.8) { //部分手机点击屏幕时无法做到delta===0
					if (this.danshou == 1) {
						if (e.changedTouches[0].clientX < this.windowWidth / 3) { //点击屏幕左1/3为上一页
							this.goPrePage()
						} else if (e.changedTouches[0].clientX > this.windowWidth / 3 * 2) { //点击屏幕右1/3为下一页
							this.goNextPage()
						} else if (e.changedTouches[0].clientX <= this.windowWidth / 3 * 2 && e.changedTouches[0]
							.clientX >= this
							.windowWidth / 3) { //点击屏幕中间1/3为呼出菜单
							this.showMenu()
						}
					} else {

						if (e.changedTouches[0].clientX < this.windowWidth / 3 || e.changedTouches[0].clientX > this
							.windowWidth / 3 * 2) { //点击屏幕左1/3为上一页
							this.goNextPage()
							console.log('下')
						} else if (e.changedTouches[0].clientX <= this.windowWidth / 3 * 2 && e.changedTouches[0]
							.clientX >= this
							.windowWidth / 3) { //点击屏幕中间1/3为呼出菜单
							this.showMenu()
						}

					}
				} else {
					if (this.next && this.delta <= 0) { //下一页
						this.goNextPage()
					} else if (this.next && this.delta > 0) { //取消翻页
						this.prePage.pageTranslate = [
							`(${-this.windowWidth}px,0)`,
							`(${-this.windowWidth}px,0)`,
							`(0,${-this.windowHeight}px)`
						]
						this.curPage.pageTranslate = [
							`(0,0)`,
							`(0,0)`,
							`(0,0)`
						]
						this.nextPage.pageTranslate = [
							`(0,0)`,
							`(${this.windowWidth}px,0)`,
							`(0,${this.windowHeight}px)`
						]
					} else if (this.pre && this.delta >= 0) { //上一页
						this.goPrePage()
					} else if (this.pre && this.delta < 0) { //取消翻页
						this.prePage.pageTranslate = [
							`(${-this.windowWidth}px,0)`,
							`(${-this.windowWidth}px,0)`,
							`(0,${-this.windowHeight}px)`
						]
						this.curPage.pageTranslate = [
							`(0,0)`,
							`(0,0)`,
							`(0,0)`
						]
						this.nextPage.pageTranslate = [
							`(0,0)`,
							`(${this.windowWidth}px,0)`,
							`(0,${this.windowHeight}px)`
						]
						this.cover.pageTranslate = [
							`(${-this.windowWidth}px,0)`,
							`(${-this.windowWidth}px,0)`,
							`(0,${-this.windowHeight}px)`
						]
					}
				}
				this.next = false
				this.pre = false
				this.setStorage()
			},

			/**
			 * 取消触摸
			 **/
			touchcancel() {
				//取消翻页,重置页面
				this.showAnimation = false
				this.showShadow = false
				this.prePage.pageTranslate = [
					`(${-this.windowWidth}px,0)`,
					`(${-this.windowWidth}px,0)`,
					`(0,${-this.windowHeight}px)`
				]
				this.curPage.pageTranslate = [
					`(0,0)`,
					`(0,0)`,
					`(0,0)`
				]
				this.nextPage.pageTranslate = [
					`(0,0)`,
					`(${this.windowWidth}px,0)`,
					`(0,${this.windowHeight}px)`
				]
				this.cover.pageTranslate = [
					`(${-this.windowWidth}px,0)`,
					`(${-this.windowWidth}px,0)`,
					`(0,${-this.windowHeight}px)`
				]
				this.next = false
				this.pre = false
			},

			/**
			 * 呼出菜单
			 **/
			showMenu() {
				
				this.menuShow = true;
				setTimeout(() => {
					this.itemShow = true
				}, 100)
			},

			/**
			 * 关闭菜单
			 **/
			closeMenu() {
				
				this.itemShow = false
				this.settingShow = false
				this.directoryShow = false
				setTimeout(() => {
					this.directoryShowBefore = false
					this.menuShow = false
				}, 300)
			},

			/**
			 * 关闭菜单栏，呼出设置栏
			 **/
			openSetting() {

				//this.itemShow = false
				this.settingShow = !this.settingShow
				// setTimeout(() => {
				// 	this.settingShow = true
				// }, 300)
			},

			/**
			 * 关闭菜单栏，呼出目录栏
			 **/
			openDirectory() {
				
				//this.itemShow = false
				this.directoryShowBefore = true
				// setTimeout(() => {
				// 	this.directoryShow = true
				// }, 300)
				this.directoryShow = true
			},

			/**
			 * 拖动进度条
			 **/
			slideChanging(e) {
				this.progressTouched = true
				this.chapterProgress = e.detail.value
			},

			/**
			 * 结束拖动进度条
			 **/
			async slideChange(e) {

				this.chapterProgress = e.detail.value
				uni.showLoading({
					title: this.$t('read.jzz')
				})
				await this.getThreeChapter(e.detail.value)
				this.progressTouched = false
				this.goToPage(1)
				// uni.hideLoading()

			},

			/**
			 * 上一页,页面轮换
			 **/
			goPrePage() {
				if (this.prePage.isCover) { //如果是首页
					this.cover.pageTranslate = [
						`(0,0)`,
						`(0,0)`,
						`(0,0)`
					]
					this.curPage.pageTranslate = [
						`(0,0)`,
						`(${this.windowWidth}px,0)`,
						`(0,${this.windowHeight}px)`
					]
					return
				}
				if (!this.prePage.ready && !this.preChapter.ready) {
					this.waitForPre = true
					this.prePage.text = ''
					this.curPage.text = ''
					this.nextPage.text = ''
					return
				}
				let showChapter = false
				this.currentPage -= 1
				if (this.currentPage === -1) { //翻至上一章了
					showChapter = true
					this.currentPage = this.preChapter.totalPage - 1
					this.chapterRotate('pre')
				}

				let cur = [].concat(this.curPage.pageTranslate)
				let pre = [].concat(this.prePage.pageTranslate)
				this.goToPage(this.currentPage)
				this.prePage.pageTranslate = [
					`(${-this.windowWidth}px,0)`,
					`(${-this.windowWidth}px,0)`,
					`(0,${-this.windowHeight}px)`
				]
				this.curPage.pageTranslate = pre
				this.nextPage.pageTranslate = cur
				setTimeout(() => {
					if (showChapter) {
						// uni.showToast({
						//   title: this.curChapter.chapterName,
						//   icon: 'none'
						// })
					}
					this.showAnimation = true
					this.prePage.pageTranslate = [
						`(${-this.windowWidth}px,0)`,
						`(${-this.windowWidth}px,0)`,
						`(0,${-this.windowHeight}px)`
					]
					this.curPage.pageTranslate = [
						`(0,0)`,
						`(0,0)`,
						`(0,0)`
					]
					this.nextPage.pageTranslate = [
						`(0,0)`,
						`(${this.windowWidth}px,0)`,
						`(0,${this.windowHeight}px)`
					]
				}, 50)
				this.setStorage()
			},


			/**
			 * 下一页,页面轮换
			 **/
			goNextPage() {
				if (this.nextPage.isEnd) { //如果翻至本书末尾

					/*****************************************/
					/**********    根据需要更改    ************/
					/*****************************************/
					uni.showToast({
						title: this.$t('read.myzxnr'),
						icon: 'none'
					})
					/*****************************************/
					/*****************************************/
					/*****************************************/
					return
				}
				if (!this.nextPage.ready && !this.nextChapter.ready) {
					this.waitForNext = true
					this.prePage.text = ''
					this.curPage.text = ''
					this.nextPage.text = ''
					return
				}
				this.currentPage += 1
				let showChapter = false
				let tt = time.getInervalHour(time.dtime(), uni.getStorageSync('config_time'))

				if (tt != '0分') {
					this.config.ad_status = 0;
				} else {
					this.config.ad_status = parseInt(uni.getStorageSync('config').ad_status);
				}
				console.log('tt', tt, this.config.ad_status)
				//启动广告
				

				// #ifdef  MP
				if (parseInt(this.config.task_wx_status_j) && this.config.ad_status==30) {

					// console.log('小程序广告',this.config.task_wx_status_j)
					if (this.currentPage > this.curChapter.totalPage) { //翻至下一章了
						// console.log('this.config.ad_status',this.config.ad_status)
						console.log('videoAd', interstitialAd)
						// 在适合的场景显示插屏广告
						if (interstitialAd) {
							interstitialAd.show().catch((err) => {
								console.error(err)
							})
						}
						showChapter = true
						this.currentPage = 0
						this.chapterRotate('next')

					}

				} else {
					if (this.currentPage === this.curChapter.totalPage) { //翻至下一章了
						showChapter = true
						this.currentPage = 0
						this.chapterRotate('next')
					}
					if (this.currentPage > this.curChapter.totalPage) { //翻至下一章了
						console.log(1)
						showChapter = true
						this.currentPage = 0
						this.chapterRotate('next')
					}
				}

				// #endif 
				
				// #ifdef  H5
				if (this.currentPage === this.curChapter.totalPage) { //翻至下一章了
					showChapter = true
					this.currentPage = 0
					this.chapterRotate('next')
				}
				if (this.currentPage > this.curChapter.totalPage) { //翻至下一章了
					console.log(1)
					showChapter = true
					this.currentPage = 0
					this.chapterRotate('next')
				}
				// #endif 
				let cur = [].concat(this.curPage.pageTranslate)
				let next = [].concat(this.nextPage.pageTranslate)


				this.goToPage(this.currentPage)
				this.prePage.pageTranslate = cur
				this.curPage.pageTranslate = next
				this.nextPage.pageTranslate = [
					`(0,0)`,
					`(${this.windowWidth}px,0)`,
					`(0,${this.windowHeight}px)`
				]
				setTimeout(() => {
					if (showChapter) {
						// uni.showToast({
						//   title: this.curChapter.chapterName,
						//   icon: 'none'
						// })
					}
					this.showAnimation = true
					this.prePage.pageTranslate = [
						`(${-this.windowWidth}px,0)`,
						`(${-this.windowWidth}px,0)`,
						`(0,${-this.windowHeight}px)`
					]
					this.curPage.pageTranslate = [
						`(0,0)`,
						`(0,0)`,
						`(0,0)`
					]
					this.nextPage.pageTranslate = [
						`(0,0)`,
						`(${this.windowWidth}px,0)`,
						`(0,${this.windowHeight}px)`
					]
				}, 50)
				this.setStorage()
			},

			/**
			 * 章节轮换
			 **/
			async chapterRotate(type) {
				if (type === 'next') {
					this.preChapter = Object.assign({}, this.curChapter)
					this.curChapter = Object.assign({}, this.nextChapter)
					if (this.curChapter.chapterIndex !== this.directoryList.length - 1) { //最后一章是根据目录列表长度判断
						this.nextChapter = {
							ready: false,
							chapterIndex: this.curChapter.chapterIndex + 1,
							chapterName: this.directoryList[this.curChapter.chapterIndex + 1].name,
							link: this.directoryList[this.curChapter.chapterIndex + 1].link
						}
						await this.getOneChapter(this.directoryList[this.curChapter.chapterIndex + 1].chapterId)
						this.$set(this.nextChapter, 'text', this.tmpChapter.text)
						this.$set(this.nextChapter, 'canRead', this.tmpChapter.canRead)
						this.calcNextChapter()
					} else {
						this.nextChapter = {
							ready: true,
							isEnd: true
						}
					}
				}
				if (type === 'pre') {
					this.nextChapter = Object.assign({}, this.curChapter)
					this.curChapter = Object.assign({}, this.preChapter)
					if (this.curChapter.chapterIndex !== 0) {
						this.preChapter = {
							ready: false,
							chapterIndex: this.curChapter.chapterIndex - 1,
							chapterName: this.directoryList[this.curChapter.chapterIndex - 1].name,
							link: this.directoryList[this.curChapter.chapterIndex - 1].link
						}
						await this.getOneChapter(this.directoryList[this.curChapter.chapterIndex - 1].chapterId)
						this.$set(this.preChapter, 'text', this.tmpChapter.text)
						this.$set(this.preChapter, 'canRead', this.tmpChapter.canRead)
						this.calcPreChapter()
					} else {
						this.preChapter = {
							ready: true,
							isCover: true
						}
					}
				}
			},


			/**
			 * 跳转下一章
			 **/
			goNextChapter() {
				if (this.curChapter.chapterIndex === this.directoryList.length - 1) {
					uni.showToast({
						title: this.$t('read.yjszhyz'),
						icon: 'none'
					})
					return
				}
				if (this.waitForNext || this.waitForPre) {
					return
				}
				if (this.nextChapter.ready) {
					this.chapterRotate('next')
					
					if(this.turnType==2){
						//console.log(this.tmpChapter.text,222)
						//this.curPage.text = this.tmpChapter.text
						
						if(this.scrollTop==1){
							this.scrollTop=2
						}else{
							this.scrollTop=1
						}
					}			
					this.goToPage(1)				
				} else {
					this.prePage.text = ''
					this.curPage.text = ''
					this.nextPage.text = ''
					this.waitForNextChapter = true
				}

			},

			/**
			 * 跳转上一章
			 **/
			goPreChapter(page) {
				if (this.curChapter.chapterIndex === 0) {
					uni.showToast({
						title: this.$t('read.zsdyz'),
						icon: 'none'
					})
					return
				}
				if (this.waitForNext || this.waitForPre) {
					return
				}
				if (this.preChapter.ready) {
					this.chapterRotate('pre')
					if(this.turnType==2){
						//console.log(this.tmpChapter.text,222)
						this.curPage.text = this.tmpChapter.text
	
					}	
					this.goToPage(1)				
				} else {
					this.prePage.text = ''
					this.curPage.text = ''
					this.nextPage.text = ''
					this.waitForPreChapter = true
				}
			},


			/**
			 * 根据页码跳转
			 **/
			goToPage(page) {
				this.currentPage = page
				this.showAnimation = false
				this.curPage = {
					ready: this.curChapter.ready,
					chapterName: this.curChapter.chapterName,
					text: this.curChapter.text,
					pageNum: this.currentPage,
					totalPage: this.curChapter.totalPage,
					link: this.curChapter.link,
					pageTranslate: [
						`(0,0)`,
						`(0,0)`,
						`(0,0)`
					],
					canRead: this.curChapter.canRead
				}
				if (this.currentPage === 0) {
					if (this.preChapter.ready && this.preChapter.isCover) {
						console.log(5)//翻至封面了
						this.prePage = {
							ready: true,
							isCover: true,
							pageTranslate: [
								`(${-this.windowWidth}px,0)`,
								`(${-this.windowWidth}px,0)`,
								`(0,${-this.windowHeight}px)`
							]
						}
					} else {
						this.prePage = {
							ready: this.preChapter.ready,
							chapterName: this.preChapter.chapterName,
							text: this.preChapter.text,
							pageNum: this.preChapter.totalPage - 1,
							totalPage: this.preChapter.totalPage,
							link: this.preChapter.link,
							pageTranslate: [
								`(${-this.windowWidth}px,0)`,
								`(${-this.windowWidth}px,0)`,
								`(0,${-this.windowHeight}px)`
							],
							canRead: this.preChapter.canRead
						}
					}
				} else {
					console.log(666)
					this.prePage = {
						ready: true,
						chapterName: this.curChapter.chapterName,
						text: this.curChapter.text,
						pageNum: this.currentPage - 1,
						totalPage: this.curChapter.totalPage,
						link: this.curChapter.link,
						pageTranslate: [
							`(${-this.windowWidth}px,0)`,
							`(${-this.windowWidth}px,0)`,
							`(0,${-this.windowHeight}px)`
						],
						canRead: this.curChapter.canRead
					}
				}
				if (this.currentPage >= this.curChapter.totalPage - 1) {
					if (this.nextChapter.ready && this.nextChapter.isEnd) {
						console.log(777)//翻至最后一章了
						this.nextPage = {
							ready: true,
							isEnd: true,
							pageTranslate: [
								`(0,0)`,
								`(${this.windowWidth}px,0)`,
								`(0,${this.windowHeight}px)`
							]
						}
					} else {
						console.log(888)
						this.nextPage = {
							ready: this.nextChapter.ready,
							chapterName: this.nextChapter.cchapterName,
							link: this.nextChapter.link,
							text: this.nextChapter.text,
							pageNum: 0,
							totalPage: this.nextChapter.totalPage,
							pageTranslate: [
								`(0,0)`,
								`(${this.windowWidth}px,0)`,
								`(0,${this.windowHeight}px)`
							],
							canRead: this.nextChapter.canRead
						}
					}
				} else {
					console.log(999)
					
					this.nextPage = {
						ready: true,
						chapterName: this.curChapter.chapterName,
						text: this.curChapter.text,
						pageNum: this.currentPage + 1,
						totalPage: this.curChapter.totalPage,
						link: this.curChapter.link,
						pageTranslate: [
							`(0,0)`,
							`(${this.windowWidth}px,0)`,
							`(0,${this.windowHeight}px)`
						],
						canRead: this.curChapter.canRead
					}
					 this.curChapter.text = "<p style='font-size: 25px;margin-left: -35px;cursor: default;letter-spacing: 2px;line-height: 1.5;margin-top: 50px;margin-bottom: 50px;font-family: MyFont;display:block'>" + this.curChapter.chapterName+ "</p>" + this.curChapter.text
				}
				uni.hideLoading()
			},

			/**
			 * 跳转到指定章节
			 **/
			async goToChapter(index) {
				uni.showLoading({
					title: "加载中..."
				})
				this.progressTouched = false
				this.closeMenu()
				this.prePage.text = ''
				this.nextPage.text = ''
				//this.curPage.text = ''
				await this.getThreeChapter(index)
				if (uni.getStorageSync('turnType') === 3) {
					var page = 1
				} else {
					var page = 0
				}
				this.goToPage(page)
			},

			/**
			 * 加大字体
			 **/
			async bigSize() {
				let progress = this.progress //记录阅读进度用于调整字体后跳转
				this.fontSize += 2
				uni.setStorageSync('fontSize', this.fontSize)
				this.calcHeight()
				await this.calcCurChapter()
				let page = Math.floor((this.curChapter.totalPage - 1) * progress)
				this.goToPage(page)
				if (this.preChapter.ready && !this.preChapter.isCover) {
					this.preChapter.ready = false
					await this.calcPreChapter()
				}
				if (this.nextChapter.ready && !this.nextChapter.isEnd) {
					this.nextChapter.ready = false
					await this.calcNextChapter()
				}



			},

			/**
			 * 缩小字体
			 **/
			async smallSize() {
				let progress = this.progress
				this.fontSize -= 2
				uni.setStorageSync('fontSize', this.fontSize)
				this.calcHeight()
				await this.calcCurChapter()
				let page = Math.floor((this.curChapter.totalPage - 1) * progress)
				this.goToPage(page)
				if (this.preChapter.ready && !this.preChapter.isCover) {
					this.preChapter.ready = false
					await this.calcPreChapter()
				}
				if (this.nextChapter.ready && !this.nextChapter.isEnd) {
					this.nextChapter.ready = false
					await this.calcNextChapter()
				}

			},
			/**
			 * 单手切换
			 **/
			changeds(type) {

				if (type === 2) { //切换为繁体
					this.danshou = 2
					uni.setStorageSync('danshou', 2)
				} else { //切换为简体
					this.danshou = 1
					uni.setStorageSync('danshou', 1)
				}
			},

			/**
			 * 切换繁体简体
			 **/
			changeFont(type) {

				if (type === 2) { //切换为繁体

					this.preChapter.text = traditionalized(this.preChapter.text)
					this.curChapter.text = traditionalized(this.curChapter.text)
					this.nextChapter.text = traditionalized(this.nextChapter.text)
					this.prePage.text = traditionalized(this.prePage.text)
					this.curPage.text = traditionalized(this.curPage.text)
					this.nextPage.text = traditionalized(this.nextPage.text)
					this.simplified = 2
					uni.setStorageSync('simplified', 2)
				} else { //切换为简体
					this.preChapter.text = simplized(this.preChapter.text)
					this.curChapter.text = simplized(this.curChapter.text)
					this.nextChapter.text = simplized(this.nextChapter.text)
					this.prePage.text = simplized(this.prePage.text)
					this.curPage.text = simplized(this.curPage.text)
					this.nextPage.text = simplized(this.nextPage.text)
					this.simplified = 1
					uni.setStorageSync('simplified', 1)
				}
			},

			/**
			 * 改变行距
			 **/
			async changeLineHeight(lineHeight) {
				let progress = this.progress
				if (lineHeight === this.lineHeight) {
					return
				} else {
					this.lineHeight = lineHeight;
					uni.setStorageSync('lineHeight', this.lineHeight)
					this.calcHeight()
					await this.calcCurChapter()
					let page = Math.floor((this.curChapter.totalPage - 1) * progress)
					this.goToPage(page)
					if (this.preChapter.ready && !this.preChapter.isCover) {
						this.preChapter.ready = false
						await this.calcPreChapter()
					}
					if (this.nextChapter.ready && !this.nextChapter.isEnd) {
						this.nextChapter.ready = false
						await this.calcNextChapter()
					}

				}
			},


			/**
			 * 改变翻页方式
			 **/
			changeTurnType(turnType) {
				if (turnType === this.turnType) {
					console.log('改变翻页方式')
					return
				} else {
					this.showAnimation = false
					this.turnType = turnType;
					uni.setStorageSync('turnType', this.turnType)
				}
			},

			/**
			 * 改变背景
			 **/
			changeBackground(background) {
				if (background === this.background) {
					return
				} else {
					this.background = background;
					uni.setStorageSync('background', this.background)
				}
			},
			/**
			 * 获取一章数据
			 **/
			GetReadContent(id) {
				let url = this.BookData.data.source.body_url.replace("{{key}}", this.BookData.id);
				url = url.replace("{{key1}}", id);
				this.zaiApi({
					url: url,
				}).then((res) => {
					this.GetReadData(res);
				});
			},
			GetReadData(SourceCode) {
				_tool.GetReadContentData(SourceCode).then((res) => {
					this.tmpChapter.text = res;
					this.tmpChapter.canRead = true
					uni.hideLoading()
				});
			},
			getOneChapter(chapterId, showLoading) {

				/*****************************************/
				/**********    根据需要更改    ************/
				/*****************************************/
				return new Promise((resolve, reject) => {
					// 模拟网络时间
					if (chapterId) {
						if (!this.Refreshis) {
							_bookshelf.GetBook(this.bookId + chapterId).then((ids) => {

								if (ids) {
									//console.log(ids,111)
									this.wifi = false;
									this.tmpChapter.text = ids;
									this.tmpChapter.canRead = true
									if (this.simplified === 2) { //切换为繁体  注意：这里默认数据库中是简体字
										this.tmpChapter.text = traditionalized(this.tmpChapter.text)
									}
									resolve()
									this.isloading = false	
									return
								}
							});
						}
						let url = this.BookInfo.source.body_url.replace("{{key}}",this.bookId);
						url = url.replace("{{key1}}", chapterId);
						this.scroll_times++	
						let header = {}
						if (this.BookInfo.source.header) {
							header = this.hesplic(this.BookInfo.source.header)
						}
						console.log(url)
						
						this.zaiApi({
							url: url,
							header: header
						}).then((res) => {

		
							this.wifi = false;
							_tool.GetReadContentData(res, this.BookInfo.source,url).then((ress) => {
								_bookshelf.GetBook(this.bookId + chapterId, ress, this.Refreshis)
									.then((ids) => {
										//console.log(ids,222)
										this.tmpChapter.text = ids;
										//console.log(ids)
										this.isloading = false	
										this.tmpChapter.canRead = true
										if (this.simplified === 2) { //切换为繁体  注意：这里默认数据库中是简体字
											this.tmpChapter.text = traditionalized(this
												.tmpChapter.text)
										}
										resolve()
									});
								resolve()
							});
						}, (err) => {

							this.wifi = this.$t('read.jcwifi')
						});
						//this.tmpChapter.text = `<p>${chapterId}</p>` + this.text  //模拟数据

						// 根据业务实际情况判断该用户是否可阅读,逻辑后端判断

					} else {
						this.tmpChapter.text = '' //注意：不能阅读章节请赋值为空字符串

						// 根据业务实际情况判断该用户是否可阅读,逻辑后端判断
						this.tmpChapter.canRead = false
						resolve()
					}




					//resolve()

				}).then(() => {}, () => {

					// 此处是网络连接失败的逻辑
					uni.hideLoading()
					return new Promise((resolve, reject) => {
						uni.showModal({
							title: this.$t('ljsb'),
							content: this.$t('jcwifi'),
							confirmText: this.$t('cs'),
							success: async (res) => {
								if (res.confirm) {
									//用户点击了重试
									await this.getOneChapter(chapterId, true)
									resolve()
								} else if (res.cancel) {
									//用户点击取消
									this.back()
								}
							}
						})
					})

				})
				/*****************************************/
				/*****************************************/
				/*****************************************/
			},


			/**
			 * 获取三章数据
			 **/
			async getThreeChapter(index) {
				
				await this.getOneChapter(this.directoryList[index].chapterId)
				this.curChapter = {
					chapterIndex: index,
					chapterName: this.directoryList[index].name,
					text: this.tmpChapter.text,
					link: this.directoryList[index].link,
					canRead: this.tmpChapter.canRead
				}
				
					
				
				if (this.curChapter.chapterIndex !== 0) {

					await this.getOneChapter(this.directoryList[index - 1].chapterId)
					this.preChapter = {
						chapterIndex: index - 1,
						chapterName: this.directoryList[index - 1].name,
						text: this.tmpChapter.text,
						canRead: this.tmpChapter.canRead,
						link: this.directoryList[index - 1].link,
					}
				} else {
					this.preChapter = {
						ready: true,
						isCover: true
					}
				}

				if (this.curChapter.chapterIndex !== this.directoryList.length - 1) {
					await this.getOneChapter(this.directoryList[index + 1].chapterId)
					this.nextChapter = {
						chapterIndex: index + 1,
						chapterName: this.directoryList[index + 1].name,
						link: this.directoryList[index + 1].link,
						text: this.tmpChapter.text,
						canRead: this.tmpChapter.canRead
					}
				} else {
					this.nextChapter = {
						ready: true,
						isEnd: true
					}
				}
				
				await this.calcCurChapter()
				await this.calcPreChapter()
				await this.calcNextChapter()
			},
			bookback() {

				clearInterval(this.timearr)
				uni.setStorageSync('details' + this.BookData.id, this.BookData.data);
				uni.navigateTo({
					url: '/pages/book_mall/details?id=' + this.BookInfo.id
				});
				//this.back()
			},
			/**
			 * 购买书籍接口
			 **/
			buyBook() {
				//在回调中调用this.initPage()刷新本页
				uni.showToast({
					title: this.$t('tzzgg'),
					icon: 'none'
				})
			},
			Refresh() {
				this.Refreshis = true
				this.goToChapter(this.curChapter.chapterIndex)
			},
			switchs(data) {
				this.BookInfo = data
				this.bookId = this.BookInfo.id;
				this.$refs.popup.close();
				this.prePage.text = ''
				this.curPage.text = ''
				this.nextPage.text = ''
				this.postBookDetails(this.BookInfo.id, 1);
				// console.log(data)

				//this.goToChapter(this.curChapter.chapterIndex)
			},
			postBookDetails(id) {

				// let url = this.BookData.data.source.body_url.replace("{{key}}", id); 
				// url=url.replace("{{key1}}", this.BookData.sid);
				  
				let header = {}
				if (this.BookInfo.source.header) {
					header = this.hesplic(this.BookInfo.source.header)
				}  
				console.log(this.BookInfo.source)
				let url = this.BookInfo.source.rand_url.replace("{{key}}", id);
				this.zaiApi({
					url: url,
					header:header
				}).then(res => {
					this.postDetailsData(res)
				});
			},
			postDetailsData(Book) { //获取目录和章节
				this.source_name = this.BookInfo.source.book_name
				_tool.DetailsData(Book, this.BookInfo.source, this.BookInfo.id).then(async res => {
					this.directoryList = res.list;
					res.data.source = this.BookInfo.source
					this.bookId=res.data.id
					let bookDatas = {
						id: res.data.id,
						sid: 0,
						page: 0,
						index: 1,
						name: res.data.name,
						title: res.data.name,
						img: res.data.img,
						data: res.data,
						list: this.directoryList
					};
					_tool.UpBookListData(bookDatas).then((res) => {
						this.addBtn = true;
					});
					await this.getThreeChapter(this.curChapter.chapterIndex)
					if (uni.getStorageSync('turnType') === 3) {
						var page = 1
					} else {
						var page = 0
					}
					await this.goToPage(page)
					uni.hideLoading()
				});
			},
			onChange() {
				this.$refs.popup.show();
				var that = this;
				this.sqllist.forEach(async (res) => {
					await that.so(res.search_url, res)
				});
			},
			watchClose() {
				this.$refs.popup.close();
			},
			async so(search_url, data) {
				this.listData = []
				let that = this;
				let header = {}
				if (data.header) {
					header = this.hesplic(data.header)
				}
				console.log(header)
				let url = search_url.replace("{{key}}", that.BookInfo.name);
				this.zaiApi({
					url: url,
					header:header
				}).then(function(res) {
					that.GetSearchData(res, data)
				});
			},
			GetSearchData(res, data) {
				let that = this;
				_tool.searchData(res, data).then(function(res) {
					console.log(that.BookInfo)
					res.map((item, index) => {
						if (item.name+item.author === that.BookInfo.name+that.BookInfo.author) {
							that.listData = that.listData.concat(item)
						}
					});
				});
			},
			clickurl(url){
				uni.showModal({
					title: '书源地址',
					content: url,
					confirmText:'去看看',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.setClipboardData({
								data: `${url}`,
								success: function () {
									
									uni.showToast({
										title: '复制成功!请粘贴浏览器里查看',
										duration: 2000,
										icon:'none'
									});
								},fail(e){
									console.log(e)
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				console.log('复制链接',url)
			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.hidden {
		opacity: 0;
	}

	.action {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;

		.item {
			flex: 1;
			height: 100%;
		}
	}

	.container {
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		padding: 50px 20px 0px 20px;
		height: 100%;
		width: 100%;
		background-color: #fff;
		

		.chapter {
			font-size: 28rpx;
			color: $minor-text-color;
			height: 67rpx;
			width: 100%;
			padding-left: 40rpx;
			line-height: 40rpx;
		}

		.bottom-bar {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			//font-size: 14px;
			color: $minor-text-color;
			height: 40px;
			width: 100%;
			margin-bottom: 40rpx;
			font-size: 12px;
			font-family: MyFont1;
			font-weight: 400;
		}
		.selector {
		    color: rgba(0, 0, 0, 0.55) !important;
		    font-size: 12px;
		}	
		.content {
			flex: 1 1 auto;
			

			.inner-box {
				overflow: hidden;
				margin-top: 20px;	
				.book-inner {
					//font-family: MyFont;
					text-align: justify;
					text-justify: inter-ideograph;
					text-indent: 2em;
					word-break: break-all;
					word-wrap: break-word;
				}
			}
		}

	}

	.container0 {
		background: url(../../static/background1.jpg);
		background-color: #d6b991;
		background-size: 100% 100%;
	}

	.container1 {
		background-color: #000;
	}

	.container2 {
		background-color: #fff;
	}
	/* From Uiverse.io by Fernando-sv */ 
	.loader {
		
	  border: 2px solid rgba(79, 79, 79, 0.2);
	  border-left-color: #00000045;
	  border-radius: 50%;
	}
	
	.loader {
	  border: 2px solid rgba(79, 79, 79, 0.2);
	  border-left-color: #00000045;
	  width: 23px;
	  height: 23px;
	}
	
	.loader {
	  border: 2px solid rgba(79, 79, 79, 0.2);
	  border-left-color: #00000045;
	  width: 23px;
	  height: 23px;
	  animation: spin89345 1s linear infinite;
	}
	
	@keyframes spin89345 {
	  0% {
	    transform: rotate(0deg);
	  }
	
	  100% {
	    transform: rotate(360deg);
	  }
	}
	.container3 {
		background-color: #d7e3d7;
	}

	.container4 {
		background-color: #ffcccc;
	}

	.container5 {
		background-color: #ead8ca;
	}

	.mc0 {
		background-color: #d8b381;

		// .icon {
		// 	border: #795548 solid 1rpx;
		// }

		.type-setting {
			border-radius: 5px;
			border: #795548 solid 1px;

			.line {
				width: 100%;
				border-bottom: #795548 solid 1px;
			}

			.lineActive {
				width: 100%;
				border-bottom: #795548 solid 1px;
			}
		}

		.active {
			// color: #333333;
			// background-color: #dfb875;
			// border: #795548 solid 1px;
			background-color: rgba(255,255,255,0.7);
			color: rgba(0,0,0,0.9);
		}
	}

	.mc1 {
		background-color: #000;



		// .icon {
		// 	border: #eee solid 1rpx;
		// }

		.type-setting {
			border-radius: 5px;
			border: #eee solid 1px;

			.line {
				width: 100%;
				border-bottom: #eee solid 1px;
			}

			.lineActive {
				width: 100%;
				border-bottom: #fff solid 1px;
			}
		}

		.active {
			color: #000000;
			background-color: #ffffff;
			border: #eeeeee solid 1px;
			// background-color: rgba(255,255,255,0.1);
			// color: rgba(255,255,255,0.8);
		}
	}

	.mc2 {
		background-color: #fff;



		// .icon {
		// 	border: #000 solid 1rpx;
		// }

		.type-setting {
			border-radius: 5px;
			border: #000 solid 1px;

			.line {
				width: 100%;
				border-bottom: #000 solid 1px;
			}

			.lineActive {
				width: 100%;
				border-bottom: #000 solid 1px;
			}
		}

		.active {
			// color: #ffffff;
			// background-color: #000;
			// border: #000 solid 1px;
			background-color: rgba(255,255,255,0.7);
			color: rgba(0,0,0,0.9);
		}
	}

	.mc3 {
		//color: #318a5c;
		background-color: #d7e3d7;



		// .icon {
		// 	border: #318a5c solid 1rpx;
		// }

		.type-setting {
			border-radius: 5px;
			border: #318a5c solid 1px;

			.line {
				width: 100%;
				border-bottom: #318a5c solid 1px;
			}

			.lineActive {
				width: 100%;
				border-bottom: #318a5c solid 1px;
			}
		}

		.active {
			// color: #d7e3d7;
			// background-color: #318a5c;
			// border: #318a5c solid 1px;
			background-color: rgba(255,255,255,0.7);
			color: rgba(0,0,0,0.9);
		}
	}

	.mc4 {
		//color: #cc6666;
		background-color: #ffcccc;



		// .icon {
		// 	border: #cc6666 solid 1rpx;
		// }

		.type-setting {
			border-radius: 5px;
			border: #cc6666 solid 1px;

			.line {
				width: 100%;
				border-bottom: #cc6666 solid 1px;
			}

			.lineActive {
				width: 100%;
				border-bottom: #cc6666 solid 1px;
			}
		}

		.active {
			// color: #ffcccc;
			// background-color: #cc6666;
			// border: #cc6666 solid 1px;
			background-color: rgba(255,255,255,0.7);
			color: rgba(0,0,0,0.9);
		}
	}

	.mc5 {
		//color: #bd8411;
		background-color: #ead8ca;



		// .icon {
		// 	border: #bd8411 solid 1rpx;
		// }

		.type-setting {
			border-radius: 5px;
			border: #bd8411 solid 1px;

			.line {
				width: 100%;
				border-bottom: #bd8411 solid 1px;
			}

			.lineActive {
				width: 100%;
				border-bottom: #bd8411 solid 1px;
			}
		}

		.active {
			// color: #ead8ca;
			// background-color: #bd8411;
			// border: #bd8411 solid 1px;
			background-color: rgba(255,255,255,0.7);
			color: rgba(0,0,0,0.9);
		}
	}

	.menu {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 300;

		// transition: all .3s;
		.menu-top {
			position: absolute;
			left: 0;
			width: 100%;

			.head {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				// height: 40px;
				width: 100%;
				line-height: 40px;
			}

			.back {
				position: absolute;
				top: 0;
				left: 10px;
			}
		}

		.directory {
			position: absolute;
			// top: 0;
			// display: flex;
			// flex-flow: column;
			// width: 600rpx;
			// height: 100%;
			// transition: left .1s;
				bottom: 0;
			    display: flex;
			    flex-flow: column;
			    justify-content: flex-end;
			    width: 100%;
			    height: 75%;
			    transition: left .1s;
			    overflow: hidden;
			    border-radius: 30rpx;

			.bookname {
				padding: 20px 0 20px 10px;
				height: 60px;
				font-size: 18px;
			}

			.directory-listItem {
				display: flex;
				align-items: center;
				padding-left: 20px;
				height: 40px;
				font-size: 14px;
			}


		}

		.show-link {
			width: 95%;
			font-size: 20rpx;
			padding-right: 40rpx;
			line-height: 30rpx;
			
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.menu-bottom {
			position: absolute;
			left: 0;
			width: 100%;

			.show-chapter {
				position: absolute;
				left: 50%;
				top: 0;
				transform: translate(-50%, -110%);
				padding: 5px 10px;
				line-height: 20px;
				border-radius: 10rpx;
				font-size: 13px;
			}

			.progress-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20px;
				height: 50px;
				width: 100%;
				// font-size: 15px;
			}

			.items-box {
				display: flex;
				justify-content: space-around;
				align-items: center;
				//height: 80px;
				width: 100%;
				height: 100px;
				margin-bottom: 10rpx;
				.item-box {
					display: flex;
					flex-flow: column;
					justify-content: center;
					align-items: center;
					height: 100%;
				}
			}
		}

		.setting {
			position: absolute;
			left: 0;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			padding: 10px 20px;
			width: 100%;
			transition: bottom .3s;
			margin-bottom: 100px;	
			.item {
				display: flex;
				align-items: center;
				height: 60px;
				.itemauto {
					display: flex;
					align-items: center;
					overflow-x: auto;
					overflow-y: hidden;
					white-space: nowrap;
					justify-content: space-around;
				}

				.item-name {
					padding-right: 20rpx;
					font-size: 28rpx;
					display: inline-block;
					width: 130rpx;
				}

				.item-font {
					//padding-right: 30rpx;
					//font-size: 40rpx;
					background-color: rgba(255, 255, 255, .7);
					width: 12%;
					border-radius: 15rpx;
					/* height: 40px; */
					/* transform: translateX(112.60000000000001px); */
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 27rpx;
					/* margin: 0 atuo; */
					padding: 4rpx;
					font-weight: bolder;
					font-family: MyFont1 Medium;
					height: calc(100% - 4px);
                    color: rgba(0, 0, 0, 0.55);
				}

				.icon {
					padding: 10rpx 40rpx;
					font-size: 28rpx;
					font-weight: bolder;
					width: auto;
					text-align: center;
					border-radius: 20rpx;
					line-height: 22rpx;
					margin-right: 30rpx;
					height: calc(100% - 4px);
					margin: 2px;
					width: 30%;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					font-size: 14px;
                    color: grey//rgba(0, 0, 0, 0.55);   
				}

				.bjicon {
					// width: 70rpx;
					// height: 70rpx;
					// border-radius: 50%;
					width: 40px;
					height: 40px;
					border-radius: 12px;
					margin-right: 30rpx;
				}

				.type-setting {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					margin-right: 10px;
					padding: 5px;
					height: 30px;
					width: 25px;

					.line {
						width: 100%;
					}

					.lineActive {
						width: 100%;
					}
				}


			}
		}
	}

	.fonts {
		font-size: 30rpx;
		font-weight: 700;
	}

	.fontfpr {
		font-size: 20rpx;
		font-weight: 700;
		line-height: 60rpx;
		color: #5a5959;

	}

	.head-title {
		left: 60rpx;
		position: absolute;
		top: 0;
		width: 470rpx;
		white-space: nowrap;
		/*内容超宽后禁止换行显示*/
		overflow: hidden;
		/*超出部分隐藏*/
		text-overflow: ellipsis;
		/*文字超出部分以省略号显示*/
	}

	.head-right {
		right: 10px;
		position: absolute;
		top: 0;

		.left {
			padding-left: 40rpx;
		}
	}

	.cover {
		image {
			height: 400rpx;
			width: 300rpx;
			background-color: #eee;
		}
	}

	.img-box {
		width: 220rpx;
	}

	.jh {
		color: #027ce1;
		margin-left: 30rpx;

	}

	.yuanba {
		background-color: #027ce1;
		color: #fff;
		padding: 20rpx;
	}

	.cu-list.menu-rand>.cu-item {
		position: relative;
		display: flex;
		padding: 0 30upx;
		min-height: 100upx;
		background-color: #ffffff;
		justify-content: space-between;
		align-items: center
	}

	.bookj {
		position: absolute;
		margin-top: 180rpx;
		padding: 10rpx 30rpx;
		right: 0;
		border-radius: 10px 0px 0px 10px;
		border: 1px solid #e8e8e8;
	}

	.bookfor {
		position: absolute;
		margin-top: 250rpx;
		padding: 10rpx 30rpx;
		right: 0;
		border-radius: 10px 0px 0px 10px;
		border: 1px solid #e8e8e8;
		display: grid;
	}

	.adContainer {
		width: 100%;
		margin-bottom: 30rpx;
	}
</style>
